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

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

・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>

// モーダルの処理

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>

[JavaScript] 超入門：データ型を基礎から理解！文字列・数値・配列・オブジェクトをやさしく解説

2025.06.18

[JavaScript] 超入門：letとconstの違いと使い分けをやさしく解説

2025.06.11

[JavaScript] 超入門：JavaScriptにおける変数と定数とは？

2025.05.28

SEARCH

CATEGORY

TAG

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

RELATED POSTS

[JavaScript] 超入門：データ型を基礎から理解！文字列・数値・配列・オブジェクトをやさしく解説

[JavaScript] 超入門：letとconstの違いと使い分けをやさしく解説

[JavaScript] 超入門：JavaScriptにおける変数と定数とは？

社内風景

社内風景2