2019/8/19Webサイトの訪問者に対して、重要なお知らせや注意を引くために設置されることの多い「ポップアップウィンドウ」。モーダルウィンドウと呼ばれることもあります。一般的なデザインは画面全体を覆うように透過した背景色を敷き、画面サイズよりも幅と高さが小さな枠を画面の中央に設置し、その中にコンテンツを表示しています。ポップアップウィンドウを閉じるには、ポップアップ内の閉じるボタンをクリックします。透過した背景のどこかをクリックすると閉じる場合もあります。本記事では、サイト訪問時に自動で開くポップアップウィンドウを作ります。ポップアップのコンテンツには動画を埋め込みます。ポップアップの動作にはjQueryのプラグインを使用します。必要なファイルをダウンロードしてindex.htmlで読み込みます。ポップアップウィンドウの動作には、手軽に導入できるjQueryのプラグインを使用します。jQueryとはウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリです。該当のファイルを読み込むことで、少ない記述でプログラムを実行することができます。プラグインの利用にはjQueryの本体の読み込みが必要です。Librariesなどのファイルを読み込む方法があります。jQueryの基本的な使い方については公式サイトの解説をご覧ください。ポップアップウィンドウのライブラリはいくつかありますが、今回はColorboxを使用します。リンク先からデータ一式をダウンロードして解凍したら、フォルダ内の「jquery.colorbox-min.js」と「colorbox.css」を読み込みます。CSSはデザイン違いで5種類用意されていますので、好きなものを使用してください。そのCSSと対応するimagesファイルもプロジェクトのフォルダに移動またはコピーしてください。index.htmlのファイルの読み込みは以下のようになります。jQueryのファイルは必ず本体のあとにプラグインを読み込むようにしてください。src="jquery.colorbox-min.js"></script>ポップアップの設定index.htmlにaタグを記述し、href属性に再生したい動画の埋め込み用コードを設定します。class="colorbox">動画を見る</a>まだポップアップウィンドウは開きません。ポップアップを開くためにプラグインColorboxの設定をします。記述するだけでポップアップが開きます。形でオプションを追記することで、ポップアップの大きさや開く速度などカスタマイズすることができます。ポップアップのサイズは任意の数字を入れてください。});});デモ「サイト訪問時に自動で開くポップアップウィンドウ」のデモ最後にポップアップウィンドウは訪問時に強制的に開くことが多く、ユーザーが操作するまで閉じない場合はメインコンテンツを見ることを遮られているように感じるかもしれません。ページを更新する度に開いたり、何度も繰り返し同じ情報が表示されたりすることにうんざりしたユーザーがWebサイトから離れてしまわないように使い方にはちょっとした注意や工夫が必要です。ポップアップウィンドウの適切な使い方についてはこちらの記事が詳しいです。