#HTML
filename.html
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-git.js"></script>
<title>modal</title>
</head>
<body>
<!-- モーダルウィンドウを開くボタン -->
<p><a href="#modal01" class="modalOpen">Open</a></p>
<!-- モーダルウィンドウ -->
<div class="modal" id="modal01">
<!-- モーダルウィンドウが開いている時のオーバーレイ -->
<div class="overLay modalClose"></div>
<!-- モーダルウィンドウの中身 -->
<div class="inner">
モーダルウィンドウ
<a href="" class="modalClose">Close</a>
</div>
</div>
<script>
$(function(){
$(".modalOpen").click(function(){
var navClass = $(this).attr("class"),
href = $(this).attr("href");
$(href).fadeIn();
$(this).addClass("open");
//cssアニメーションの記述を追加する
$(href).children(".inner").css("animation","modal 0.5s forwards");
return false;
});
$(".modalClose").click(function(){
$(this).parents(".modal").fadeOut();
$(".modalOpen").removeClass("open");
//cssアニメーションの記述を追加する
$(this).parents(".modal").children(".inner").css("animation","modalClose 0.5s forwards");
return false;
});
});
</script>
</body>
</html>
#CSS
filename.css
body {
position:relative;
}
/* モーダルウィンドウのスタイル */
.modal {
position:absolute;
width:100%;
height:100vh;
top:0;
left:0;
display:none;
}
/* オーバーレイのスタイル */
.overLay {
position:absolute;
top:0;
left:0;
background:rgba(200,200,200,0.9);
width:100%;
height:100vh;
z-index:10;
}
/* モーダルウィンドウの中身のスタイル */
.modal .inner {
position:absolute;
z-index:11;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}