AboutデジタルIT・インターネットホームページ作成Colorboxの使い方:jQueryで簡単モーダルウインドウホームページ作成Colorboxの使い方:jQueryで簡単モーダルウインドウ(3ページ目)jQueryでモーダルウインドウUIを簡単に作れるColorboxの使い方を解説。ウェブページ全面を暗転し、中央に重ねたボックスをモーダルウインドウ風に見せるUIは、Lightbox系jQueryプラグイン「Colorbox」を使えば、ほんの3行程度のJavaScriptを書くだけで作れます。モーダルウインドウ内には、装飾された文章でも画像でも「別HTMLの中身」でも何でも表示できて便利です。文宏ホームページ作成ガイドjQueryで簡単にモーダルウインドウを表示できるColorboxの使い方さて、前のページで解説した手順1~3の準備が完了したら、次にColorboxスクリプトを使ってモーダルウインドウとして表示したい対象を指定しましょう。方法はとても簡単で、ほんの数行のHTML+JavaScriptを書くだけです。手順4以降は、(A)別のHTMLをモーダルウインドウに表示したい場合と、(B)同一HTML内に存在する要素をモーダルウインドウに表示したい場合とで分けて解説します。Colorboxの適用対象の指定とオプションを記述する前ページの手順3で記述したソースの直後に、以下の記述を加えます。});</script>上記のソースでは、Colorboxスクリプトが対象とする要素を指定したり、表示するモーダルウインドウのサイズなどを記述しています。上記のままコピー&ペーストしてみて下さい。表示確認後に必要があれば値を調整すると良いでしょう。カスタマイズポイントは、以下の2点です。」部分:まず、Colorboxの動作対象にしたいリンクに付加するclass名を指定します。ここでは「iframe」としていますが、自由に変更可能です。変更した場合は、これ以降の記述も同様に変更する必要があります。」部分:次に、オーバーレイ表示するモーダルウインドウのサイズを指定します。上記では横幅も高さも「80%」を指定しています。好みのサイズを指定して下さい。モーダルウインドウに表示させたい外部ページが複数個ある場合は、下記のようにグループ名を加えておくと、矢印ボタン[←][→]を使って連続的に切り替えられるようになります。詳しくは、最後にご紹介する2つのサンプルページもご参照下さい。height:"80%"});※上記の「group1」の部分は、任意の文字列に変更できます。別HTMLへのリンクを記述する最後に、モーダルウインドウ内に表示するページへのリンクを記述します。このリンクは、必要なだけ何個でも列挙できます。title="ウィキペディア表紙">ウィキペディアHOMEページ</a>このように、a要素を使って普通にリンクを書けば良いだけです。Colorboxスクリプトの適用対象として認識されるよう、指定のclass属性値(ここでは「iframe」)を付加しています。title属性値に書いた文字列は、モーダルウインドウのタイトル領域に表示されます。Colorboxスクリプトが正しく実行されると、(リンクとしては機能せずに)モーダルウインドウが指定した条件でオーバーレイ表示され、そのモーダルウインドウ内にリンク先ページが表示されます。※何らかの原因でColorboxスクリプトが動作しなかった場合でも、通常のリンクとして機能します。閲覧者が「リンク先を新しいタブで開く」等の機能を使った場合も、通常のリンクとして機能します。モーダルウインドウの表示例とサンプルページ上記の1~5の手順でサンプルページを作成すると、例えば下図のように表示されます。実際にブラウザで表示確認してみたい場合は、下記のサンプルページをブラウザで表示してみて下さい。Colorboxに付属の5デザインのうち、「example1」と「example5」を使った2つの例を用意しています。About)を連続的に切り換えられます。サンプル5側では「グループ名」を省略してあるため、1サイトずつしか開きません。サンプルページのHTMLソースを表示させてみて、記述方法も参考にして下さい。ソース内に解説コメントが加えてあります。このサンプルページのHTMLソースから直接コピー&ペーストする方が、楽に記述できるでしょう。同一ページ内の内容をモーダルウインドウに表示する方法Colorboxスクリプトには、同一ページ内に(非表示状態で)記述しておいたコンテンツをモーダルウインドウ内に表示する機能もあります。別ファイルに分離しておくほどでもない短い補足情報などを表示したい場合には、この方が楽でしょう。手順は下記B-4~6の通りです。※前ページで解説した準備(手順1~3)に変わりはありません。その後の手順4以降だけが異なりますので、その部分だけを以下に解説します。Colorboxの適用対象の指定とオプションを記述するまず、下記のように対象要素のclass名とオプションを記述します。表示サイズは小さめに「50%」を指定しています。サイズは好みに合わせて修正して下さい。});</script>ここでは「class="inline"」を指定した要素(リンク)が動作対象になるよう指定しています。対象のclass名は自由に変更可能です。モーダルウインドウ内に表示するコンテンツを非表示状態で用意する次に、表示したい内容を以下のように、デフォルトで非表示になるよう記述します。<p><strong>ここは、Colorboxで表示させるためにHTML内に(非表示設定で)記述された内容です。<p>ここに書かれている文章は、別のHTMLファイルではなく、同じHTMLファイル内に記述されています。CSSを使って「標準では非表示」になるよう装飾されているだけです。別ファイルを用意しなくて済むので、読み込み待ち時間が掛からないため、表示は高速です。<p>外部のHTMLファイルを読むだけでなく、このように内部に書いておいた文章をモーダルウインドウ内に表示させることもできます。指定した範囲が、モーダルウインドウ内に表示されます。id名は自由に変更可能です。複数用意したい場合は、id名を変えて必要なだけ列挙して下さい。モーダルウインドウ内に表示するコンテンツへのリンクを記述する最後に、モーダルウインドウ内に表示するボックスへのリンクを記述します。リンク先(href属性値)には、表示したい要素に付加してあるid属性値(ここでは「inline_content」)を記述します。ページ内リンクを作る場合と同じ記述方法です。title="補足情報">インラインコンテンツ</a>※上記のようにtitle属性を加えて文字列を指定しておけば、モーダルウインドウのタイトル欄に表示されます。title属性は省略しても問題ありません。オーバーレイ表示例とサンプルページ上記のHTMLソースを使って表示した例は下図の通りです。「インラインコンテンツ」リンクをクリックすると、非表示になっている部分がモーダルウインドウの中に表示されます。実際にブラウザで表示確認してみたい場合は、下記のサンプルページをブラウザで表示して下さい。※先程のサンプルページと同じです。「内部のHTMLをオーバーレイ表示する」と書かれているリンクが、上図のように表示されるサンプルです。→Colorboxで指定のURLをオーバーレイ表示するサンプル1→Colorboxで指定のURLをオーバーレイ表示するサンプル5サンプル1側では、モーダルウインドウにタイトルを指定していません。サンプル5側では、モーダルウインドウに「補足情報」というタイトルを指定しています。表示の違いを比較してみて下さい。jQueryで簡単にモーダルウインドウ風のUIを作れるColorbox今回は、jQueryを使ってウェブ上にモーダルウインドウのようなUIを簡単に作れるColorboxスクリプトの使い方をご紹介いたしました。した補足情報を表示させたい場合などに便利です。【編集部おすすめの購入サイト】Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!前のページへ123※記事内容は執筆時点のものです。最新の内容をご確認ください。異なる可能性があります。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。