LoginSignup
0
0

More than 3 years have passed since last update.

WebStorageで1回目のアクセス時のみモーダルを表示する WebStorageで1回目のアクセス時のみモーダルを表示する

Posted at

HTML

<div id="c-modal_bg"></div>
<div id="c-modal">
    <p>モーダルの中身です。<br />
    モーダルの中身です。<br />
    モーダルの中身です。</p>
    <p><input type="checkbox" name="acs_next" value="" />次回以降表示しない</p>
    <div id="c-modal_close">閉じる</div>
</div>

Javascript

// モーダルの処理
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';

    // チェックボックスにチェックが入っている場合は、次回以降表示しないようにする
    if(document.getElementsByName('acs_next')[0].checked) {
        sessionStorage.setItem('acs2', 'on');
    }
}

// 「次回以降表示しない」にチェックを入れていない場合
if(sessionStorage.getItem('acs2') === null) {

} else {
    // チェックを入れている場合はモーダルを削除
    modal_close();
}

ソース
http://cly7796.net/wp/javascript/display-modal-only-on-first-access-using-webstorage/

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0