↓のDEMOのようなモーダルの作り方を解説します。

DEMO

HTML

    <section class="modal_area">
      <h2 class="modal_area_title">モーダル</h2>
      <ul class="modal_wrap">
        <li class="modal_content" data-target="con1">
          モーダルボタン①
        </li>
        <li class="modal_content" data-target="con2">
          モーダルボタン②
        </li>
        <li class="modal_content" data-target="con3">
          モーダルボタン③
        </li>
      </ul>
    </section>

    ↓footerの下
    <div id="message">
      <div id="con1" class="remodal">
        <p>モーダル①</p>
        <p class="modal_close">閉じる</p>
      </div>
      <div id="con2" class="remodal">
        <p>モーダル②</p>
        <p class="modal_close">閉じる</p>
      </div>
      <div id="con3" class="remodal">
        <p>モーダル③</p>
        <p class="modal_close">閉じる</p>
      </div>
    </div>

HTMLは、モーダルのボタン部分とボタンに紐づく表示部分を分けてマークアップします。 また、モーダルの一つずつにカスタムデータ属性(data-)をつけておきます。jsを使うときにこれがモーダルを識別するものになります。

CSS

      
      .modal_area{
        position: relative;
      }
      .modal_wrap{
        list-style:none;
      }
      .modal_content{
        display:inline-block;
        padding:20px;
        background-color:#eee;
      }
      .remodal {
        position:relative;
        display: none;
        margin: 0 auto;
        padding:50px;
        background-color:#fff;
        z-index:1;
        width:50%;
      }
      .modal_close {
        padding: 15px;
        background-color: #000;
        color: #fff;
        width: 30%;
        text-align: center;
        margin: 30px auto;
        cursor: pointer;
      }
      .body_hide {
        overflow: hidden;
        position: relative;
        height: 100%;
      }
      .overlay{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.2);
      }

JS

      
      'use strict';
      $(function () {
        // モーダル
        $('.modal_content').click(function(){
          $('html').css('overflow',"hidden");
          $('#message').append('<div class="overlay"></div>');
          $('.overlay').fadeIn('slow');
          $('#message').fadeIn('slow');

          var modal = '#' + $(this).attr('data-target');
          $(modal).fadeIn();
          $('.overlay').off().click(function(){
            $(modal).fadeOut('slow');
            $('html').css('overflow',"auto");
            $('#message').fadeOut('slow');
            $('.overlay').fadeOut('slow',function(){
              $('.overlay').remove();
            });
          });
          $(".modal_close").click(function(){
            $(modal).fadeOut('slow');
            $('html').css('overflow',"auto");
            $('#message').fadeOut('slow');
            $('.overlay').fadeOut('slow',function(){
              $('.overlay').remove();
              location.reload();
            });
          });
        });  
      });
      
    

　

簡単に言うと、 モーダルボタンをクリック　→　overlayを追加、fadeIn　→　取得したモーダルオブジェクトを表示させるという流れです。 また、閉じるボタンと、モーダルの範囲外をクリックすると閉じるようにもしてあります。