jQueryで領域外クリック時にポップアップを閉じる機能を実装する方法
この記事の概要
Web制作者
ポップアップの領域外をクリックして、ポップアップを閉じる動きをつけたい
管理人
シンプルなjQueryを使うことで、実現可能です！
この後詳しく説明しますね。
本記事の内容
- 領域外クリック時にポップアップを閉じる機能の仕様
- 領域外クリック時にポップアップを閉じる機能の考え方
- 領域外クリック時にポップアップを閉じる機能の具体的な実装方法
ウェブページ上でボタンをクリックすすると、ポップアップが表示されることがあります。
ここでは、ポップアップ要素の領域外をクリックした時にポップアップを閉じる機能をjQueryを使って実装します。
仕様とイメージ
仕様
- ボタンをクリックしてポップアップを表示
- ポップアップ以外の領域をクリックするとポップアップを閉じる
- ポップアップ領域をクリックしてもポップアップ領域は閉じない
「クリックでポップアップ表示」をクリックするとポップアップが表示されます。ポップアップ要素の領域外をクリックするとポップアップは閉じます。
イメージ
ポップアップの領域内をクリック→ポップアップはそのまま表示
ポップアップの領域外をクリック→ポップアップが閉じる
領域外クリックの基本的な考え方
「ある要素の領域外をクリックした時にポップアップを閉じる」ものというと、モーダルウインドウが挙げられます。
モーダルウインドウにおける領域外クリック
モーダルウインドウを表示させるときに、オーバーレイという半透明の背景が画面を覆っている部分があります（これがモーダルウインドウにおける領域外に当たります）。
モーダルウインドウではオーバーレイで画面全体を覆うので、領域外をクリックしてポップアップを閉じたい時には、オーバーレイ要素をクリックイベントで指定して、jQueryメソッドの.hide()、.css('display', 'none')を使用してポップアップを閉じるといった処理を行います。
オーバーレイなしでのポップアップの場合の領域外クリック
オーバーレイなしで領域外をクリックした時にポップアップを閉じる場合はどうでしょう。
モーダルウインドウと同じように実装するとしたら、オーバーレイ無しだとポップアップ要素以外すべてに対してクリックイベントを発生させなければいけませんん。これでは非常に面倒でスマートではないので、別の方法を採用します。
モーダルウインドウとは逆に、すべてのクリックイベントの中でポップアップ要素の領域内であれば何もしない、それ以外はポップアップを閉じるという処理を行います。
HTML、CSSで見た目を整える
HTML、CSSのソースコードは下記の通りです。
HTML
<div id="content">
<div id="button">
クリックでポップアップ表示
</div>
<div id="pop_up" style="display:none;">
<p>ここはポップアップ表示領域です。<br>ここをクリックしてもポップアップは閉じません。</p>
</div>
</div>
ポイントは2つです。
- ポップアップ表示ボタン（id名:button）を設置する
- ポップアップ表示領域（id名:pop_up）を非表示（display:none）で設置する
CSS
#button {
font-size: 13px;
font-weight: 400;
color: #fff;
text-align: center;
background: #333;
padding: 15px 0;
margin: 15px auto;
width: 250px;
cursor: pointer;
}
#pop_up {
text-align: center;
background: #fff;
padding: 60px 20px;
margin: auto;
width: 550px;
border: 4px double #ccc;
box-shadow: 2px 2px 5px 1px #999;
}CSSに関しては一応参考までに掲載しておきます。ポップアップを表示させるボタン部分にはcursor: pointerを指定して、「ここはクリックできますよ」というアピールをしています。
JavaScript（jQuery）で動作を実装
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script><head>にjQueryを読み込む記述をします。
//１．クリックイベントの設定
$(document).on('click', function(e) {
// ２．クリックされた場所の判定
if(!$(e.target).closest('#pop_up').length && !$(e.target).closest('#button').length){
$('#pop_up').fadeOut();
}else if($(e.target).closest('#button').length){
// ３．ポップアップの表示状態の判定
if($('#pop_up').is(':hidden')){
$('#pop_up').fadeIn();
}else{
$('#pop_up').fadeOut();
}
}
});１．クリックイベントの設定
基本のつくりとして、.onメソッドでclickイベントを設定し、ハンドラ（function()）内にクリック時の処理を書きます。
２．クリックされた場所の判定
.targetメソッドで、クリックされた要素を取得します。.closest()メソッドで一番近い親要素を選択します。.lengthメソッドで、クリックされた要素の数を選択します。
これらを組み合わせて、クリックされた場所がポップアップとポップアップ表示ボタンの要素内ではない時に、.fadeOutメソッドでポップアップを非表示にしています。
３．ポップアップの表示状態の判定
クリックされた場所が、ポップアップ表示ボタンを構成する要素だった場合、.is(':hidden')でポップアップが表示されていないかどうかをチェックします。
ポップアップが表示されていなかったら、.fadeIn()でポップアップを表示させます。ポップアップが非表示の場合は、.fadeOut()でポップアップを非表示にします。
まとめ
ボタンクリックでポップアップ表示非表示を切り替えて、かつポップアップ表示領域外をクリックするとポップアップを非表示にする機能を実装することができました。
javaScriptのコードは短いですが、色々なメソッドが使用されており、また、jQueryのクリックイベントなどではバブリング（イベントの伝達）という考え方があるので、勉強になると思います。