×

jQueryで領域外クリック時にポップアップを閉じる機能を実装する方法

2016年11月27日 コーディング

マウスクリック

ウェブブラウザ上で、「ある要素をクリックするとウェブページの最前面にポップアップが出現して、ポップアップの領域外をクリックするとポップアップを閉じる」といった機能を見かけたことはありませんか?

この記事では、領域外クリック時にポップアップを閉じる機能をjQueryを使って実装します。

基本的な考え方

「領域外をクリックした時にポップアップを閉じる」というと、モーダルウインドウで実装されているものを見かけます。

少しモーダルウインドウにおける領域外クリックを考えてみます。

モーダルウインドウにおける領域外クリック

モーダルウインドウを表示させるときに、オーバーレイという半透明の背景が画面を覆っている部分があります(これがモーダルウインドウにおける領域外に当たります)。

leanmodal【簡単軽量】jQueryプラグインleanModalを使ってモーダルウインドウを表示させてみよう
誘導したいページのリンクを表示したり、強調したい内容を表示させるのにモーダルウィンドウがしばしば使われます。 jQueryで一...

モーダルウインドウについては上の記事でサンプルを確認してみてください。

モーダルウインドウではオーバーレイで画面全体を覆うので、領域外をクリックしてポップアップを閉じたい時には、オーバーレイ要素をクリックイベントで指定して、.hide()とか.css(‘display’, ‘none’)でポップアップを閉じてあげます。

オーバーレイなしでのポップアップの場合の領域外クリック

では、オーバーレイなしで領域外をクリックした時にポップアップを閉じる場合はどうでしょう。

モーダルウインドウと同じように実装するとしたら、オーバーレイ無しだとポップアップ要素以外すべてに対してクリックイベントを発生させなければいけませんん。

これでは非常に面倒でスマートではないので、別の方法を採用します。

モーダルウインドウとは逆に、すべてのクリックイベントの中で、ポップアップ要素の時はそのまま、それ以外はポップアップを閉じるという処理を行います。

サンプルで動作を確認

サンプルを用意しました。

DEMO

DEMOページの「クリックでポップアップ表示」をクリックするとポップアップが表示されます。ポップアップの領域以外をクリックすると、ポップアップは閉じます。

htmlをコーディング

クリックでポップアップ表示

ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。

ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。

ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。ここはメインコンテンツです。

ポイントは2つです。

  • ポップアップ表示ボタン(id名:button)を設置する
  • ポップアップ表示領域(id名:pop_up)を非表示(display:none)で設置する

※ヘッダーやサイドバーなどの他要素はポップアップを分かりやすくするために設置しています。

CSS

div {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

p {
	font-size:14px;
	margin: 0 15px 20px;
	line-height: 1.75
}

#main {
	width: 950px;
	height: auto;
	border: 1px solid #ccc;
	margin: auto;
}

#header {
	background: #eee;
	padding: 70px 0;
	border-bottom: 1px solid #ccc;
	text-align: center;
}

#content {
	width: 70%;
	border-right: 1px solid #ccc;
	float:left;
	position: relative;
}

#sidebar {
	width: 30%;
	float: right;
	text-align: center;
	padding: 100px 0;
}

#button {
	font-size: 13px;
	font-weight: normal;
	text-align: center;
	padding: 15px 0;
	color: #fff;
	background: #313131;
	width: 250px;
	margin: 15px 0 30px 15px;
	cursor: pointer;
}

#pop_up {
	width: 550px;
	background: #fff;
	position: absolute;
	left: 200px;
	padding: 60px 20px;
	border: 4px double #ccc;
	box-shadow: 2px 2px 5px 1px #999;
}

.clearfix:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
}

CSSに関しては一応参考までに掲載しておきます。ポップアップを表示する位置は、position:absoluteで適当に決めています。

ポップアップを表示させるボタン部分にはcursor: pointerを指定して、「ここはクリックするとイベントが発生しますよ」アピールをしています。

jQueryで領域外クリックイベントを設定する

jQueryを使用してクリックイベントを設定します。




jQueryを読み込みます。

//1.クリックイベントの設定
$(document).on('click', function(e) {
	// 2.クリックされた場所の判定
	if(!$(e.target).closest('#pop_up').length && !$(e.target).closest('#button').length){
		$('#pop_up').fadeOut();
	}else if($(e.target).closest('#button').length){
		// 3.ポップアップの表示状態の判定
		if($('#pop_up').is(':hidden')){
			$('#pop_up').fadeIn();
		}else{
			$('#pop_up').fadeOut();
		}
	}
});

1.クリックイベントの設定

基本のつくりとして、「.onメソッド」で「clickイベント」を設定し、ハンドラ(function())内にクリック時の処理を書きます。

2.クリックされた場所の判定

.targetメソッドで、クリックされた要素を取得します。.closest()メソッドで一番近い親要素を選択します。.lengthメソッドで、クリックされた要素の数を選択します。

これらを組み合わせて、クリックされた場所が「ポップアップとポップアップ表示ボタンの要素内ではない」時に、.fadeOutでポップアップを非表示にしています。

3.ポップアップの表示状態の判定

クリックされた場所が、ポップアップ表示ボタンを構成する要素だった場合、.is(‘:hidden’)でポップアップが表示されていないかどうかをチェックします。

ポップアップが表示されていなかったら、fadeIn()でポップアップを表示させます。ポップアップが非表示の場合は、fadeOutでポップアップを非表示にします。

まとめ

ボタンクリックでポップアップ表示非表示を切り替えて、かつポップアップ表示領域外をクリックするとポップアップを非表示にする機能を実装することができました。

javaScriptのコードは短いですが、色々なメソッドが使用されており、また、jQueryのクリックイベントなどではバブリング(イベントの伝達)という考え方があるので、勉強になりますよ。

関連記事