jQueryでポップアップ機能を作成するコードを紹介します。あるボタンをクリックするとポップアップが表示され、閉じるボタンをクリックまたはポップアップボックス外をクリックすると、非表示となる機能です。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;
}