色々なサイトを見ているとたまに出くわす機能。
スマホでサイトを閲覧しているときだとメニューやモーダルの閉じるボタンをわざわざ押さなくても良いのでなかなか便利。
サンプルはモーダルのみだが、メニューなどにも応用できるはず。
ソースコード
HTML
CSS
.modal {
width: 100%;
height: 100%;
background-color: rgb(204, 204, 204, 0.5);
position: fixed;
top: 0;
left: 0;
display: none; /* 最初は非表示 */
}
.modal-inner {
width: 500px;
height: 500px;
background-color: #000;
padding: 50px;
border-radius: 20px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
button.close-modal {
border: none; /* 枠線を消す */
outline: none; /* クリックしたときに表示される枠線を消す */
background: transparent; /* 背景の灰色を消す */
}
.fa-times-circle {
font-size: 32px;
color: white;
position: fixed;
top: 5px;
right: 5px;
}
jQuery
$(function(){
//モーダルを開く
$('button.open-modal').click(function() {
$('.modal').fadeIn();
});
//モーダルを閉じる
// (右上の「x」ボタン)
$('button.close-modal').click(function() {
$('.modal').fadeOut();
});
//モーダルウィンドウ内のボタンをクリックしたとき
// (検索ボタンなどを想定)
$('button.action').click(function() {
console.log('action');
});
/*
モーダルのウィンドウ以外の部分をクリックしたときはモーダルを閉じる
*/
$(document).click(function(event){
var target = $(event.target);
if(target.hasClass('modal')) {
target.fadeOut();
}
});
/*
これはダメ
画面内のどこをクリックしてもイベントが発生するため
*/
// $('.modal').click(function() {
// console.log('これはダメ');
// $(this).fadeOut();
// });
});
“$(document).～”でイベントを拾った場合、クリックした場所のDOMツリーにおける「葉」(親・子・孫・…の関係で言うところの末端の子孫)を見に行くので、クリックした場所がウィンドウ以外(= 背景の”.modal”)なのかどうかを判断できる。
一方で、”$(‘.class_name’).click()”だとクリックした場所に当該要素があるかどうかしか見ないので、例えウィンドウ内をクリックしたとしてもその後ろには”.modal”があるので反応してしまう。