モーダルウィンドウの作り方

CSSとjQueryでモーダルウィンドウを作っていきます。

See the Pen Untitled by yu-shi (@webpara) on CodePen.

コピペどーぞ。
htmlがごちゃごちゃしてるので見る気なくなるかもしれませんが解説していきます( ¯•ω•¯ )

<p class="btn"><a class="js-modal-open" data-target="modal01"><img src="img/btn01.svg"/></a></p>
<p class="btn"><a class="js-modal-open" data-target="modal02"><img src="img/btn02.svg"/></a></p>
<p class="btn"><a class="js-modal-open" data-target="modal03"><img src="img/btn03.svg"/></a></p>
<p class="btn"><a class="js-modal-open" data-target="modal04"><img src="img/btn04.svg"/></a></p>
<p class="btn"><a class="js-modal-open" data-target="modal05"><img src="img/btn05.svg"/></a></p>

まずhtmlから見ていきます。上のコードがカメラのアイコンのボタンを並べてるコードです。
data-target=”” に注目です( ¯•ω•¯ )

<div id="modal01" class="modal js-modal">
        <div class="modal__bg js-modal-close"></div>
        <div class="modal__content">
            <p><img src="img/imge01.jpg"/></p>
            <a class="js-modal-close">×</a>
        </div>
</div>
<div id="modal02" class="modal js-modal">
        <div class="modal__bg js-modal-close"></div>
        <div class="modal__content">
            <p><img src="img/imge02.jpg"/></p>
            <a class="js-modal-close">×</a>
        </div>
</div>
<div id="modal03" class="modal js-modal">
        <div class="modal__bg js-modal-close"></div>
        <div class="modal__content">
            <p><img src="img/imge03.jpg"/></p>
            <a class="js-modal-close">×</a>
        </div>
</div>
<div id="modal04" class="modal js-modal">
        <div class="modal__bg js-modal-close"></div>
        <div class="modal__content">
            <p><img src="img/imge04.jpg"/></p>
            <a class="js-modal-close">×</a>
        </div>
</div>
<div id="modal05" class="modal js-modal">
        <div class="modal__bg js-modal-close"></div>
        <div class="modal__content">
            <p><img src="img/imge05.jpg"/></p>
            <a class="js-modal-close">×</a>
        </div>
</div>

まぁいっぱいありますが数字が違うだけで同じものの繰り返しです(‘ω’)
先ほどの data-target=”” の””の中身とidが同じ名前の記述が連動します。
調整用のclass名と表示させたい画像、閉じるときのバツ印入れてあります。

body{
	text-align: center;
}
.btn{
	display: inline-block;
	width: 50px;
	margin: 100px 10px;
}
img{
	width: 100%;
	height: auto;
}
.modal{
    　　display: none;

        width: 100%;
   　　 height: 100vh;
   　　 position: fixed;
    　　top: 0;

}
.modal__bg{
	background: rgba(0,0,0,0.8);
　　　　width: 100%;
	height: 100vh;
	position: absolute;

}
.modal__content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	width: 70%;
	max-width: 570px;
	padding: 30px 30px;
	background-color: #fff;
	box-sizing: border-box;
}
.js-modal-close {
	  position: absolute;
	  top: 0.5rem;
	  right: 0.5rem;
	  cursor: pointer;
}

$(function(){
    $('.js-modal-open').each(function(){
        $(this).on('click',function(){
            var target = $(this).data('target');
            var modal = document.getElementById(target);
            $(modal).fadeIn();
            return false;
        });
    });
    $('.js-modal-close').on('click',function(){
        $('.js-modal').fadeOut();
        return false;
    }); 
});

という訳でcssとjQueryでモーダルウィンドウの作り方でした(‘ω’)ノ