モーダルウインドウの実装方法
HTML、CSS部分の作成
まずは、モーダルウィンドウを開くためのボタン、モーダルウィンドウ本体、オーバーレイ部分のパーツをそれぞれ作成していきます。
<body>
<div class="modal_open_btn">開く</div>
<div class="modal_window">
<p>モーダルウィンドウの中身です</p>
<span class="modal_close">×</span>
</div>
<div class="modal_overlay"></div>
</body>
js部分の作成
ここからはjs部分の作成になります。
こちらはjQueryを利用しているのであらかじめjQueryを読み込んでることを確認してください。
js部分1
モーダルウィンドウの表示と、bodyに対してoverflow:hiddenをかける事でモーダルウィンドウを開いている際に、スクロール出来ないように指定します。
$('.modal_open_btn').click(function () {
$('body').addClass('scroll_lock');
$('.modal_overlay').fadeIn();
$('.modal_window').fadeIn();
});
js部分2
閉じるボタン、オーバーレイ部分をクリックした際に、モーダルウィンドウの非表示と、先ほど指定したスクロールの固定を解除します。
$('.modal_close , .modal_overlay').click(function () {
$('body').removeClass('scroll_lock');
$('.modal_overlay').fadeOut();
$('.modal_window').fadeOut();
});
js部分3
ESCキーを押した時に、閉じるボタンを押した時と同様の動作をするように指定しています。
window.onkeyup = function(event){
if(event.keyCode == '27'){
$('body').removeClass('scroll_lock');
$('.modal_overlay').fadeOut();
$('.modal_window').fadeOut();
}
}
わぷまる
「keyCode == '27'」の部分で、ESCキーを指定しているので、ここの数字を変更する事で他のキーを指定することも出来るよ
全部まとめたのがこちら
$(function () {
$('.modal_open_btn').click(function () {
$('body').addClass('scroll_lock');
$('.modal_overlay').fadeIn();
$('.modal_window').fadeIn();
});
$('.modal_close , .modal_overlay').click(function () {
$('body').removeClass('scroll_lock');
$('.modal_overlay').fadeOut();
$('.modal_window').fadeOut();
});
window.onkeyup = function(event){
if(event.keyCode == '27'){
$('body').removeClass('scroll_lock');
$('.modal_overlay').fadeOut();
$('.modal_window').fadeOut();
}
}
});WordPressで上手く動かない場合、「$」を全部「jQuery」に置換する事で正常に動作する場合があります。
