この記事は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
こちらのサイトを参考にして作成しました。
画面中央に表示するモーダルウィンドウを実装したい