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

<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;
}