この記事は2017年9月15日に書かれたもので、内容が古い可能性がありますのでご注意ください。
今見ているページの上に表示されるモーダルウィンドウ(ポップアップウィンドウ)を作成しました。
デモページを作成しましたのでこちらからご確認ください。レスポンシブ対応しています。
DEMO
HTML
<div id="modal_contents">
<a href="#anc_1">Contents_1</a>
<a href="#anc_2">Contents_2</a>
<a href="#anc_3">Contents_3</a>
</div>
<div id="contents">
<ul id="anc_1">
<li class="topText">Contents_1</li>
<li>Contents_1</li>
</ul>
<ul id="anc_2">
<li class="topText">Contents_2</li>
<li>Contents_2</li>
</ul>
<ul id="anc_3">
<li class="topText">Contents_3</li>
<li>Contents_3</li>
</ul>
</div>
CSS
#contents{
font-size: 16px;
z-index: 0;
}
ul{
margin: 0 0 30px 0;
overflow: hidden;
}
li a {
border-bottom: 1px solid #ccc;
padding: 10px;
display: block;
}
.topText{
font-weight: bold;
background-color: #000;
color: #fff;
}
//モーダル用CSS
#modal_contents {
display: none;
width: 50%;
height: 117px;
margin: 0;
padding: 15px;
background-color: #fff;
color: #666;
position:fixed;
z-index: 2;
}
#modal_bg {
display:none;
width:100%;
height:100%;
background-color: rgba(0,0,0,0.5);
position:fixed;
top:0;
left:0;
z-index: 1;
}
#modal_contents a {
width: 30%;
height: 65px;
background-color: #1abc9c;
color: #fff;
display: block;
float: left;
margin: 0 1.6%;
text-align: center;
padding: 50px 0 0 0;
}
//スマホ用CSS
@media screen and (max-width: 760px) {
#modal_contents {
width: 70%;
height: auto;
padding: 5px 15px;
}
#modal_contents a {
width: 100%;
height: auto;
float: none;
margin: 4% 0;
padding: 15px 0;
}
}
Javascript
$(function(){
$("body").append('<div id="modal_bg"></div>');
modalResize();
$("#modal_bg,#modal_contents").fadeIn("slow");
$("#modal_bg,#modal_contents").click(function(){
$("#modal_contents,#modal_bg").fadeOut("slow",function(){
$('#modal_bg').remove() ;
});
});
$(window).resize(modalResize);
function modalResize(){
var w = $(window).width();
var h = $(window).height();
var cw = $("#modal_contents").outerWidth();
var ch = $("#modal_contents").outerHeight();
$("#modal_contents").css({
"left": ((w - cw)/2) + "px",
"top": ((h - ch)/2) + "px"
});
}
});
デモページを作成しましたのでこちらからご確認ください。レスポンシブ対応しています。
DEMO
こちらのサイトを参考にして作成しました。
画面中央に表示するモーダルウィンドウを実装したい