【jQuery】シンプルでそこそこ使えるモーダルウィンドウの作り方

jQueryを読み込んでおく

GoogleのCDNからjQueryを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

ウィンドウが1つの場合のソースコード

DEMO

HTML

<a class="modal_open" href="">表示する</a>
<div class="modal">
  <div class="overlay modal_close"></div>
  <div class="panel">
    <p>ここに表示したいコンテンツ。</p>
    <a class="modal_close" href="">閉じる</a>
  </div>
</div>

はじめ<div class="modal">をCSSで非表示にしておきます。

そして、その非表示になっている<div class="modal">をjQueryで表示したり、非表示にしたりします。

JavaScript

$(function(){
  $('.modal_open').click(function(){
    $('.modal').fadeIn();
    return false;
  });
  $('.modal_close').click(function(){
    $('.modal').fadeOut();
    return false;
  });
});

<a class="modal_open" href="">がクリックされたら、fadeInで<div class="modal">を表示します。

<a class="modal_close" href="">がクリックされたら、fadeOutで<div class="modal">を非表示にします。

CSS

.modal{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
.overlay{
  position: absolute;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.8);
}
.panel{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 70%;
  max-height: 70%;
  padding: 40px;
  background: #fff;
  overflow: auto;
}

.modal

前述の通り、はじめ<div class="modal">をdisplay:noneで非表示にしておきます。

表示されているときは、position: fixedで固定。width: 100%height: 100vhを指定してブラウザの幅と高さいっぱいに表示します。

.overlay

背景を暗くするためにbackground: rgba(0,0,0,0.8)を指定。

HTMLに戻りますが、<div class="overlay modal_close">にはmodal_closeも指定しているため、暗い部分をクリックすると非表示になります。

.panel

ブラウザの中央にウィンドウを表示するため、position: absolutetop: 50%left: 50%transform: translate(-50%,-50%)を指定します。

ウィンドウが複数の場合のソースコード

DEMO

ウィンドウを複数設置する場合は、HTMLとJavaScriptを少しいじります。CSSはウィンドウが1つの場合と同じです。

HTML

<a class="modal_open" data-name="mw01" href="">ウィンドウ01を表示する</a>
<div class="modal" id="mw01">
  <div class="overlay modal_close"></div>
  <div class="panel">
    <p>ウィンドウ01に表示したいコンテツ。</p>
    <a class="modal_close" href="">閉じる</a>
  </div>
</div>
<a class="modal_open" data-name="mw02" href="">ウィンドウ02を表示する</a>
<div class="modal" id="mw02">
  <div class="overlay modal_close"></div>
  <div class="panel">
    <p>ウィンドウ02に表示したいコンテツ。</p>
    <a class="modal_close" href="">閉じる</a>
  </div>
</div>

ウィンドウが1つの場合のHTMLをコピーして、それぞれのウィンドウに次の属性を追加します。

• <a class="modal_open" href="">にdata-name属性を追加
• <div class="modal">にid属性を追加

data-name属性値とid属性値を同じにします（1つ目はmw01、2つ目はmw02）。そして、クリックされた方のdata-name属性値をjqueryで取得し、同じid属性値のウィンドウを表示します。

JavaScript

$(function(){
  $('.modal_open').each(function(){
    $(this).on('click',function(){
      var name = $(this).data('name');
      var modal = document.getElementById(name);
      $(modal).fadeIn();
      return false;
    });
  });
  $('.modal_close').click(function(){
    $('.modal').fadeOut();
    return false;
  });
});

クリックされたdata-name属性値をdata('name')を使って取得。取得した値と同じ値を持つ要素をgetElementByIdで特定し取得します。

fadeInとfadeOutは、ウィンドウが1つの場合と同じです。