制作のご相談はこちら
【jQuery】モーダルウィンドウ内にアンカーリンクを作成する

2017年09月15日

【jQuery】モーダルウィンドウ内にアンカーリンクを作成する

今見ているページの上に表示されるモーダルウィンドウ(ポップアップウィンドウ)を作成しました。

デモページを作成しましたのでこちらからご確認ください。レスポンシブ対応しています。
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

こちらのサイトを参考にして作成しました。
画面中央に表示するモーダルウィンドウを実装したい