クリックすると前面に現れるモーダルウインドウを実装する方法

jQueryでモーダルウインドウを実装する方法をご紹介いたします。モーダルウインドウとは、クリックすると画面の前面に出てくる要素のことです。

ものすごく簡単なデモも用意したので、挙動についてはデモページをご参照ください。モーダルウインドウを開いた状態で、閉じるボタンか、モーダルウインドウ以外の部分をクリックするとウインドウが閉じます。

デモページを見る

jQueryを使ってモーダルウインドウを実装する方法

ステップ1. HTMLのマークアップ

HTMLは以下のような感じで、クリックする要素に.modal-open、モーダルウインドウ部分に.modal、閉じるボタンに.modal-closeというクラスを付与しておきます。

<p><a class="modal-open">ここをクリックするとモーダルウインドウが表示されます</a></p>
<div class="modal">
  <div class="modal-cont">
    モーダルウインドウで表示するコンテンツ
  </div>
  <div class="btn-modal-close"><a class="modal-close">閉じる</a></div>
</div>

ステップ2. CSSでモーダルウインドウを非表示にする

続いて、CSSでモーダルウインドウの装飾を指定して、非表示にしておきます。また、画面全体を半透明の背景で覆うために、オーバーレイのCSSも指定しておきます。

.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  text-align: center;
  background: #fff;
  padding: 30px;
}

.modal-overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0,0,0,0.65);
  z-index: 1;
}

.modal-open,
.modal-close {
  cursor: pointer;
}

オーバーレイの要素は、jQueryでHTMLに追加します。

ステップ3. スクリプトの記述

最後にjQuery本体を読み込んで、スクリプトを記述します。記述場所は</body>の直前でOKです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
  //オーバーレイとコンテンツの表示
  $(".modal-open").click(function(){
    $(this).blur() ; //ボタンからフォーカスを外す
    if($( ".modal-overlay")[0]) return false; //新たにオーバーレイが追加されるのを防ぐ
    $("body").append('<div class="modal-overlay"></div>'); //オーバーレイ用のHTMLをbody内に追加
    $(".modal-overlay").fadeIn("slow"); //オーバーレイの表示
    $(".modal").fadeIn("slow"); //モーダルウインドウの表示

    //モーダルウインドウの終了
    $(".modal-overlay,.modal-close").unbind().click(function(){
      $( ".modal,.modal-overlay" ).fadeOut( "slow" , function(){ //閉じるボタンかオーバーレイ部分クリックでフェードアウト
        $('.modal-overlay').remove(); //フェードアウト後、オーバーレイをHTMLから削除
      });
    });
  });
});
</script>

「.modal-open」の部分はクリックする要素、「.modal-close」は閉じるボタンを指定します。「.modal」がモーダルウインドウのコンテンツ部分です。

まずキーボードによる操作ができないようにフォーカスから除外しています。また、クリックする度にオーバーレイが追加されるのを防ぐために、「if($( “.modal-overlay”)[0]) return false;」で対策します。

.modal-openをクリックすると、HTMLに「<div class=”modal-overlay”></div>」が追加され、.modalが表示されます。これにより、背景が半透明のレイヤーで覆われて、モーダルウインドウを前面に表示することができます。

モーダルウインドウ内の.modal-closeか.modal-overlayをクリックすることで、モーダルウインドウが終了します。

あとがき

やっていることは意外とシンプルですね。クリックで開閉するモーダルウインドウを実装したい時は、ぜひ参考にしていただけると幸いです。

なお、こういうポップアップ系のコンテンツは、使い方によっては非常に効果的なのですが、やり過ぎると不快に思われてしまうので、よく考えてから実装することをおすすめします。