初回アクセス時のみモーダルを表示

MARKLEAPS

2022.07.22

初回アクセス時のみモーダルを表示する方法。

・html

<div id="c-modal_bg"></div>
<div id="c-modal">
    <p>モーダルの中身</p>
    <div id="c-modal_close">close</div>
</div>

<p>モーダルの中身</p>

<div id="c-modal_close">close</div>

</div>

・JavaScript

<script>
// モーダルの処理
var bg = document.getElementById('c-modal_bg');
bg.addEventListener('click', modal_close, false);
 
var close = document.getElementById('c-modal_close');
close.addEventListener('click', modal_close, false);
 
function modal_close() {
    var modal = document.getElementById('c-modal');
    modal.style.display = 'none';
    bg.style.display = 'none';
}

// 1回目のアクセスかどうか
if(sessionStorage.getItem('acs') === null) {
    // 1回目の場合はWebStorageを設定
    sessionStorage.setItem('acs', 'on');
} else {
    // 2回目以降の場合はモーダルを削除
    modal_close();
}
</script>