ミギムキ

[JavaScript] 初回アクセス時に1回だけポップアップ(モーダル)を表示したい

サンプルコード

html

<div class="bg_onetime_popup"> <div class="onetime_popup"> <div class="onetime_popup_title"> <span class="onetime_popup_title_close"></span> <span>お前はだれだ</span> </div> <div class="onetime_popup_content"> <p>オレの中のオレ</p> </div> </div> </div>
スポンサー広告

CSS

body.open_popup { overflow: hidden; } .bg_onetime_popup { position: fixed; top: 0px; left: 0px; z-index: 9999; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: 0.5s; } body.open_popup .bg_onetime_popup { opacity: 1; visibility: visible; } .onetime_popup { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 50%; min-width: 500px; background-color: #fff; } .onetime_popup_title { position: relative; padding: 1em 80px; margin: 0px; background-color: #3388dd; color: #fff; font-size: 32px; text-align: center; line-height: 1.5; } .onetime_popup_title_close { position: absolute; top: 50%; right: 30px; width: 30px; height: 30px; transform: translateY(-50%); cursor: pointer; } .onetime_popup_title_close::before, .onetime_popup_title_close::after { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; height: 4px; background-color: #fff; content: ""; } .onetime_popup_title_close::before { transform: translateX(-50%) translateY(-50%) rotate(45deg); } .onetime_popup_title_close::after { transform: translateX(-50%) translateY(-50%) rotate(-45deg); } .onetime_popup_content { padding: 60px 30px; text-align: center; }

JavaScript

window.addEventListener('load', function() { if(!localStorage.getItem('disp_popup')) { localStorage.setItem('disp_popup', 'on'); const body = document.querySelector('body'); const bgPopup = document.querySelector('.bg_onetime_popup'); const popup = document.querySelector('.onetime_popup'); const popupTitleClose = document.querySelector('.onetime_popup_title_close'); body.classList.add('open_popup'); bgPopup.addEventListener('click', function() { closePopup(); }); popup.addEventListener('click', function(e) { e.stopPropagation(); }); popupTitleClose.addEventListener('click', function() { closePopup(); }); function closePopup() { body.classList.remove('open_popup'); } } }, false);

ページを訪問する度に一度だけポップアップ表示したい

window.addEventListener('load', function() { if(!sessionStorage.getItem('disp_popup')) { sessionStorage.setItem('disp_popup', 'on'); const body = document.querySelector('body'); const bgPopup = document.querySelector('.bg_onetime_popup'); const popup = document.querySelector('.onetime_popup'); const popupTitleClose = document.querySelector('.onetime_popup_title_close'); body.classList.add('open_popup'); bgPopup.addEventListener('click', function() { closePopup(); }); popup.addEventListener('click', function(e) { e.stopPropagation(); }); popupTitleClose.addEventListener('click', function() { closePopup(); }); function closePopup() { body.classList.remove('open_popup'); } } }, false);

更新履歴

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。