2017/06/27

【jQuery】簡単モーダルウィンドウ

jQueryとCSSを組み合わせて簡単モーダルウィンドウができるので、参考サイトを参考にjQueryに書き直してみました。

1 modal.html
2 modal.css
3 modal.js

modal.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>モーダルウィンドウ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="modal.js"></script>
<link rel="stylesheet" href="modal.css">
</head>
<body>
<button id="btn_open">表示</button>

<div id="modal">
  <div id="modal_content">
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <button class="btn_close">閉じる</button>
  </div>
</div>
</body>
</html>

modal.css

#modal{
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.7);
}
#modal_content{
  width:500px;
  background:#fff;
  margin:15% auto;
  padding:10px;
  position:relative;
  animation:animatetop 0.4s;
}
@keyframes animatetop{
  from{top:-300px;opacity:0}
  to{top:0;opacity:1}
}

modal.js

$(function(){
  var modal = $('#modal'),
	    modalContent = $('#modal_content'),
	    btnOpen = $("#btn_open"),
	    btnClose = $(".btn_close");

  $(btnOpen).on('click', function() {
    modal.show();
  });

  $(modal).on('click', function(event) {
    if(!($(event.target).closest(modalContent).length)||($(event.target).closest(btnClose).length)){
      modal.hide();
    }
  });
});

【参考サイト】
How To Make a Modal Box With CSS and JavaScript