初心者でもOK！jQueryで説明文のポップアップを自作する方法

jQueryを活用したWebコンテンツとしてポップアップ表示を作りたいと考える方も少なくないでしょう。

ユーザーに何らかのメッセージを見てもらいやすくなるだけでなく、重要なアラートにもなるので今でも人気が高いわけです。しかし、いざプログラミングしようとすると何から始めたら良いのか迷う人も多いでしょう。

そこで、この記事では初心者でも今日からjQueryを使ったポップアップ表示手法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

一人でも多くの方がjQueryの不安を解消できれば幸いです。

ポップアップ表示の基本

この章では、jQueryを活用してポップアップ表示するための基本的な手法について見ていきましょう。主に、その仕組み・プログラミング方法について学んでいきます。

jQueryで実装するポップアップの仕組み

本記事のポップアップは、画面が暗転して中央に小さなウィンドウでメッセージが表示される仕組みのことです。

このポップアップを実現するには、以下のような機能が必要になることが分かります。

上記のなかで、実はjQueryが担当するのはクリックイベント処理でポップアップを表示させるきかっけを作る部分だけです。

あとの部分はHTMLとCSSの組み合わせに過ぎません。

なので、ポップアップの自作についてはあまり難しく考えずに、これまでのjQueryにおける基本メソッドを学習していたら誰でも作れるものなんです。

説明文をポップアップで表示する

それでは、実際にポップアップを作っていきましょう！

まずは骨組みとなるHTMLですが、ボタン要素とポップアップ要素の2つに大きく分かれます。

ポップアップ表示



    

        
サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト
        閉じる
    

ポップアップ要素については、画面全体を暗転させるのがClass属性値【popup】になり、実際のメッセージ表示部分がClass属性値【content】になります。

初期状態はこのポップアップ要素を非表示にしておき、ボタンをクリックした時にjQueryで表示させるという流れになります。

そこで、CSSでは【display:none】でコンテンツを非表示にしておき、表示された時の見え方として画面全体を少し暗くするスタイルにすれば良いわけです。

.popup {
    display: none;
    height: 100vh;
    width: 100%;
    background: black;
    opacity: 0.7;
    position: fixed;
    top: 0;
    left: 0;
}

.content{
    background: #fff;
    padding: 30px;
    width: 50%;
}

【height:100vh】【width:100%】の2つで画面全体を指定することになります。また、positionをfixedにすることで画面をスクロールできないように固定化しておくと良いでしょう。

ただし、このままだとポップアップが表示された時に画面中央に固定されません。そこで、簡単な調整方法としてフレックスボックスを次のように記述すると良いでしょう。

.show {
    display: flex;
    justify-content: center;
    align-items: center;
}

新しくshowというクラス名を作り、ポップアップを起動する時にこのクラスを追加することで画面中央にポップアップが表示されるようになります。

次に、jQueryですがクリックイベント処理を次のように記述します！

$('button').on('click',function(){
    $('.popup').addClass('show').fadeIn();
});
  
$('#close').on('click',function(){
    $('.popup').fadeOut();
});

とてもシンプルなプログラムですが、これだけでポップアップを自作することができるわけです。ポイントはaddClass()で先ほど作成したshowクラスを追加しており、ポップアップが表示される時に画面中央に固定されるようにしています。

ここまでのサンプルデモを以下のように作成したので、ぜひ試してみてください！

See the Pen popup-sample by sato ken (@s_masato) on CodePen.

キャプションを表示

この章では、画像にマウスを近づけると説明文（キャプション）がフワッと表示されるようにする方法を見ていきましょう。

画像に説明文を表示する仕組み

前章のポップアップを表示する仕組みが理解できていれば、実は画像にキャプションを表示するのもほとんど同じような仕組みで実装することができます。

画像を背景として考えて、キャプションをポップアップ表示するようなニュアンスに近いわけです。

ただし、今回の場合は画面中央ではなく画像の下段に表示するように工夫する必要があります。このあたりも踏まえて次の章から実際にプログラムを組み立てていきましょう！

説明文を表示してみよう

まずは、骨組みとなるHTMLから見ていきましょう！

  
  
説明文その１



  
  
説明文その２



  
  
説明文その３

この例では、3つの画像を表示するように配置していますが、もちろん画像はさらに増えても問題ありません。

pタグの部分がキャプションになるのですが、これは初期状態で非表示にしておきjQueryから操作するようにしましょう。

CSSは次のようになります。

.list {
  position: relative;
  width: 200px;
  margin: 10px;
  float: left;
}

.list p {
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  display: none;
  width: 100%;
  color: #fff;
  background: #000;
  opacity: 0.7;
  position: absolute;
  bottom: 0;
}

まず画像を含めた1つのブロックを【position: relative】にしておき、pタグの部分を【position:absolute】にする関係性に注目しておいてください。これにより、画像内の好きな位置にキャプションを表示できます。

つまり、pタグを【bottom:0】にすることで、画像の最下段に配置させることができるわけです。

キャプションを画像内にきっちり表示させるために【box-sizing: border-box】にしておくのを忘れないようにしましょう。

jQueryのプログラムについては、hover()を使ってマウスの状態を制御するようにイベント処理を組み立てましょう。

$(".list").each(function() {
  $(this).hover(
      function() {
          $(this).children("p").fadeIn();
      },
      function() {
          $(this).children("p").fadeOut();
      }
  );
});

hover()は第1引数にマウスが画像内に入った時の処理を記述し、第2引数にマウスが画像から離れた時の処理を記述します。

あとは、fadeIn() / fadeOut()をpタグに実行すればキャプションが表示されるというわけです。

ここまでのサンプルデモを以下に掲載しているので、ぜひ参考にしてみてください！

See the Pen image-caption-sample by sato ken (@s_masato) on CodePen.

プラグインの活用

この章では、jQueryプラグインを活用してより簡単にポップアップを実装できるようにしてみましょう。主に、プラグインの導入方法から実際のプログラミング手法について学んでいきます。

プラグインの導入方法

【Magnific Popup】

Magnific Popupのプラグインを導入すると、非常に簡単な記述でポップアップ表示をWebページに組み込むことが可能です。面倒なCSSによる調整やイベント処理の実装なども大幅に省くことができるのが特徴です。

まずは上記のリンクからCSS / JSファイルをダウンロードしましょう。

magnific-popup.min.css

magnific-popup.min.js

また、ファイルをダウンロードしなくても、以下のCDN経由からすぐに利用することも可能です。

https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css

https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js

ちなみに、magnific-popup.min.jsファイルはjQueryの本体ファイルの次に読み込むように順番には気をつけましょう。

ポップアップ表示を実装する

それでは、実際にプラグインを活用したポップアップを実装してみましょう。

まずは表示するポップアップのHTMLを次のように作ります。

  
サンプルテキストサンプルテキストサンプルテキスト

単純なメッセージを表示するだけですが、クラス属性の箇所に注目してみてください。

【mfp-hide】というクラス名を付与することで、初期状態でコンテンツを非表示にしてくれます。また、ID属性値はポップアップを表示するリンクのhref属性で利用します。

ポップアップ表示

このhref属性で指定したID属性値を持つコンテンツを、ポップアップで表示するという意味になるので注意しておきましょう。

ポップアップ表示するメッセージのスタイルも簡単に記述しておくと良いでしょう。

.popup {
    width: 50%;
    margin: auto;
    position: relative;
    background: #fff;
    padding: 20px;
}

最後に、jQueryによる処理ですが記述するのは以下の部分だけです！

$('.open').magnificPopup({
    type:'inline'
});

先ほどのリンク要素にmagnificPopup()を実行するだけです。

【type】にはinlineを指定することで、任意のHTMLコンテンツをポップアップ表示することができるのです。他にも、画像や動画・埋め込み要素などをポップアップさせることも可能です。

ここまでのサンプルデモを以下に掲載しておくので、ぜひコードと共に確認してみてください！

See the Pen Magnific-Popup sample by sato ken (@s_masato) on CodePen.

まとめ

今回は、jQueryで説明文などをポップアップで表示する方法について学習しました！

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！