じぶんメモ

プログラミングのメモ、日常のメモとか。

モーダルのサンプル

html jQuery css

なにかとモーダルが使われているサービスが多く、気になったので調べた。
z-indexを使ってモーダルと、モーダルの後ろの画面を隠すためのオーバーレイを前面にするのがポイント。
あとはボタン押下でdisplay: noneを解除してあげればOK。

<html lang="ja">
<head>
  <title>test</title>
  <link href="test.css" rel="stylesheet" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <!-- モーダルのオープン -->
  <a id="modal-open" class="button-link">クリックするとモーダルウィンドウを開きます。</a>
  <!-- モーダルのボディ -->
  <div id="modal-content">
    <p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
    <a id="modal-close" class="button-link">閉じる</a>
  </div>
  <!-- モーダルを強調させるためのオーバーレイ -->
  <div id="modal-overlay"></div>
</body>

<script type="text/javascript">
  // モーダル表示
  $("#modal-open").click(
   function(){
      $(this).blur();
      if ($('#modal-overlay').css('display') != 'none') { return; }
      $("#modal-overlay, #modal-content").fadeIn("fast");
      centeringModalSyncer();
   }
  );

  // モーダル非表示
  $("#modal-overlay,#modal-close").unbind().click(function(){
    $("#modal-content,#modal-overlay").fadeOut("fast");
  });

  //センタリングをする関数
  function centeringModalSyncer(){
   var w      = $(window).width();
   var h      = $(window).innerHeight();
   var cw     = $("#modal-content").outerWidth(true);
   var ch     = $("#modal-content").outerHeight(true);
   var pxleft = ((w - cw)/2);
   var pxtop  = ((h - ch)/2);
   $("#modal-content").css({"left": pxleft + "px"});
   $("#modal-content").css({"top": pxtop + "px"});
  }
</script>
</html>

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

#modal-content{
  z-index:2;
  display:none;
  position:fixed;
    width:50%;
    margin:1.5em auto 0;
    padding:10px 20px;
    border:2px solid #aaa;
    background:#fff;
}

.button-link{
    color:#00f;
    text-decoration:underline;
}

.button-link:hover{
    cursor:pointer;
    color:#f00;
}

こちらの記事を参考にさせていただきました。

syncer.jp