Skip to content

サイト訪問時に自動で開くポップアップウィンドウ

August 19

・javascript

Webサイトの訪問者に対して、重要なお知らせや注意を引くために設置されることの多い「ポップアップウィンドウ」。モーダルウィンドウと呼ばれることもあります。一般的なデザインは画面全体を覆うように透過した背景色を敷き、画面サイズよりも幅と高さが小さな枠を画面の中央に設置し、その中にコンテンツを表示しています。ポップアップウィンドウを閉じるには、ポップアップ内の閉じるボタンをクリックします。透過した背景のどこかをクリックすると閉じる場合もあります。

本記事では、サイト訪問時に自動で開くポップアップウィンドウを作ります。ポップアップのコンテンツには動画を埋め込みます。ポップアップの動作にはjQueryのプラグインを使用します。

実現したいこと

  • サイト訪問時にポップアップウィンドウが開く
  • ポップアップウィンドウでは動画を再生できる

ファイルの準備

必要なファイルをダウンロードしてindex.htmlで読み込みます。
ポップアップウィンドウの動作には、手軽に導入できるjQueryのプラグインを使用します。jQueryとは

ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリ

です。該当のファイルを読み込むことで、少ない記述でプログラムを実行することができます。プラグインの利用にはjQueryの本体の読み込みが必要です。jQueryの公式サイトからダウンロードして読み込む方法とCDNやGoogle Hosted Librariesなどのファイルを読み込む方法があります。jQueryの基本的な使い方については公式サイトの解説をご覧ください。

ポップアップウィンドウのライブラリはいくつかありますが、今回はColorboxを使用します。リンク先からデータ一式をダウンロードして解凍したら、フォルダ内の「jquery.colorbox-min.js」と「colorbox.css」を読み込みます。CSSはデザイン違いで5種類用意されていますので、好きなものを使用してください。そのCSSと対応するimagesファイルもプロジェクトのフォルダに移動またはコピーしてください。

index.htmlのファイルの読み込みは以下のようになります。jQueryのファイルは必ず本体のあとにプラグインを読み込むようにしてください。

<link rel="stylesheet" href="colorbox.css" />

<script src="jquery-3.3.1.min.js"></script>
<script src="jquery.colorbox-min.js"></script>

ポップアップの設定

index.htmlにaタグを記述し、href属性に再生したい動画の埋め込み用コードを設定します。

<a
  href="https://www.youtube.com/embed/mCFAAPoaUbc?rel=0"
  target="_blank"
  class="colorbox"
  >動画を見る</a
>

まだポップアップウィンドウは開きません。ポップアップを開くためにプラグインColorboxの設定をします。Colorboxは $(selector).colorbox(); と記述するだけでポップアップが開きます。さらに {key:value} の形でオプションを追記することで、ポップアップの大きさや開く速度などカスタマイズすることができます。Youtubeはiframeなので「 iframe: true 」にし、訪問時に自動で開くには「 open: true 」とします。ポップアップのサイズは任意の数字を入れてください。

$(function () {
  jQuery(".colorbox").colorbox({
    open: true,
    iframe: true,
    innerWidth: 650,
    innerHeight: 350,
  });
});

デモ

「サイト訪問時に自動で開くポップアップウィンドウ」のデモ

最後に

ポップアップウィンドウは訪問時に強制的に開くことが多く、ユーザーが操作するまで閉じない場合はメインコンテンツを見ることを遮られているように感じるかもしれません。ページを更新する度に開いたり、何度も繰り返し同じ情報が表示されたりすることにうんざりしたユーザーがWebサイトから離れてしまわないように使い方にはちょっとした注意や工夫が必要です。

ポップアップウィンドウの適切な使い方についてはこちらの記事が詳しいです。
ポップアップは悪か？ ポップアップを適切に使うためのポイント | UX MILK

Tags

jquery colorbox how-to