jQueryでポップアップ機能を作成する

jQueryでポップアップ機能を作成するコードを紹介します。あるボタンをクリックするとポップアップが表示され、閉じるボタンをクリックまたはポップアップボックス外をクリックすると、非表示となる機能です。DEMOを作成したので、以下のリンクから確認できます。

DEMOはこちらから

<div class="js-popup-box-open" data-popup-box-open-id="1">クリック要素</div>
<div class="popup-box" data-popup-box-id="1">
	<div class="popup-box__wrap">
		<div class="popup-box__inner">
			ポップアップボックスの中身
			<div class="popup-box__close">×</div>
		</div>
	</div>
</div>
/**
 *
 * ポップアップ機能
 */
jQuery( function($) {
	var popupBoxClass      = '.popup-box',
		popupBoxInnerClass = '.popup-box__inner',
		popupBoxCloseClass = '.popup-box__close',
		popupBoxOpenClass  = '.js-popup-box-open',
		$popupBox          = $( popupBoxClass ),
		$popupBoxOpen      = $( popupBoxOpenClass ),
		dataOpenName       = 'popup-box-open-id',
		dataOpenedName     = 'popup-box-id',
		speed              = 400;

	/**
	 * クリックイベントの判定
	 */
	var clickEventType = ( ( window.ontouchstart !== null ) ? 'click' : 'touchend' );

	$( document ).on( clickEventType, popupBoxOpenClass, openBox );

	$( document ).on( clickEventType, popupBoxClass, hideBox );

	$( document ).on( clickEventType, popupBoxCloseClass, hideBox );

	/**
	 * 子要素の伝播をストップ
	 */
	$( document ).on( clickEventType, popupBoxInnerClass, function( event ) {
		event.stopPropagation();
	} );

	/**
	 * ボックスの非表示関数
	 */
	function hideBox() {
		$( popupBoxClass ).fadeOut( speed );
	}

	/**
	 * ボックスの表示関数
	 */
	function openBox() {
		var popupId = $( this ).data( dataOpenName );
		$( '[data-' + dataOpenedName + '="' + popupId + '"]' ).fadeIn( speed );
	}
} );
/*--------------------------------------------------------------
 ポップアップ
--------------------------------------------------------------*/

.popup-box {
	display: none;
}

.popup-box__wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.6);
}

.popup-box__inner {
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
	position: relative;
	padding: 40px;
	max-width: 800px;
	height: auto;
	border-radius: 4px;
	background: #fff;
}

.popup-box__close {
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
}

.popup-box__close:hover {
	cursor: pointer;
}

石井秀幸@WEBデザイナー
WordPress公式『横浜 WordPress Meetup』主宰/株式会社ノクチ基地 取締役/モンゼンクリエイティブ合同会社 代表。WEB制作に関する技術や役立つ情報を発信していきます。10年にわたるWordPress歴を背景に、幅広いアイデアを形にするお手伝いをしています。