【jQuery】モーダルウィンドウをプラグインなしで作る【複数設置対応】

キャンセルボタンを押すまで表示されるモーダルウィンドウは、サイト作りに必須というほどでもないですけど、よく使われますよね。

今回は複数設置に対応したモーダルウィンドウをjQueryを使って実装する方法をお伝えしますので、是非サイト作りに役立てて下さい。

DEMOはこちら

実装方法

以下のHTMLとCSSを用意します。

HTML

<a href="" class="md-btn" data-target="modal01">クリックしてモーダル1を開く</a>
<div id="modal01" class="modal">
  <div class="md-overlay md-close"></div>
  <div class="md-contents">
    <a class="md-xmark md-close">
      <span></span>
      <span></span>
    </a>
    <div class="md-inner">
      <p>モーダル1が表示されます</p>
    </div>
  </div>
</div>

<a href="" class="md-btn" data-target="modal02">クリックしてモーダル2を開く</a>
<div id="modal02" class="modal">
  <div class="md-overlay md-close"></div>
  <div class="md-contents">
    <a class="md-xmark md-close">
      <span></span>
      <span></span>
    </a>
    <div class="md-inner">
      <p>モーダル2が表示されます</p>
    </div>
  </div>
</div>

CSS

.md-overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .7;
  z-index: 9999;
}

.md-contents{
  display: none;
  position: fixed;
  top: 10px;
  left: 50%;
  width: 95%;
  height: auto;
  overflow: hidden;
  transform: translateX(-50%);
  z-index: 10000;
}


.md-inner{
  padding: 24px 40px;
  background: #fff;
  height: auto;
}



.md-xmark{
  position: absolute;
  top: 34px;
  right: 20px;
  width: 25px;
  height: 22px;
  z-index: 9999;
  cursor: pointer;
}

.md-xmark span {
  height: auto;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
}

.md-xmark span:nth-of-type(1) {
  top: 0;
  transform: translateY(10px) rotate(-45deg);
}


.md-xmark span:nth-of-type(2) {
  bottom: 0;
  transform: translateY(-10px) rotate(45deg);
}

jQuery

$(function(){
  $(".md-btn").each(function(){
    $(this).on('click',function(e){
      e.preventDefault();
      var target = $(this).data('target');
      var modal = document.getElementById(target);
      $(modal).find('.md-overlay,.md-contents').fadeIn();
    });
  });
  $('.md-close').on('click',function(){
    $('.md-overlay,.md-contents').fadeOut();
  });
});

HTMLの詳細

a要素「js-modal-open」に「data-target」属性を追加しました。

この値をモーダルウィンドウのID属性とリンクさせることで、どのモーダルウィンドウを開くかわかるようにしています。

CSSの詳細

jQueryでモーダルを表示させるので、モーダルを「display: none」で非表示にしておきます。

.md-xmarkでモーダルを非表示にする為の、バツボタンを作ります。

jQueryの詳細

ではここからはjQueryの内容を1行ずつ説明していきます。

2・3行目

「複数のボタンに対して以下の処理を実行する」という指定です。どのボタンがクリックされたかわかるようにするために、eachメソッドの中でthisを使います

次の行のe.preventDefault()を指定するために、function()ではなくfunction(e)と記述します。

jQuery

$('.md-btn').each(function(){
  $(this).on('click',function(e){
  //ここに処理を記述
  });
});

4行目

通常aタグをクリックすると指定ページに飛ばされますが、その処理をキャンセルするためにe.preventDefault()を指定します。

e.preventDefault();

5行目

クリックされたボタンのdata-target属性を取得し、変数targetに代入します。

jQuery

var target = $(this).data('target');

6行目

クリックされたボタンのdata-target属性と同じID属性の要素を、変数modalに代入します。

jQuery

var modal = document.getElementById(target);

7行目

クリックされたボタンとリンクしている要素のみを表示します。

jQuery

$(modal).find('.md-overlay,.md-contents').fadeIn();

10・11行目

.md-closeをクリックして、要素を非表示にします。

jQuery

$('.md-close').on('click',function(){
  $('.md-overlay,.md-contents').fadeOut();
});

まとめ

複数設置に対応したモーダルウィンドウの記事はいかがでしたか？

jQuery関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。