ミギムキ

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

サンプルコード

html

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

CSS

.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; } .bg_onetime_popup.js_active { 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; cursor: pointer; } .onetime_popup_title { position: relative; padding: 30px 90px; margin: 0px; background-color: #3388dd; color: #fff; font-size: 32px; text-align: center; line-height: 1.5; } .onetime_popup_title:before, .onetime_popup_title:after { position: absolute; top: 50%; right: 30px; transform: translateY(-50%); width: 30px; height: 4px; background-color: #fff; content: ""; } .onetime_popup_title:before { transform: rotate(45deg); } .onetime_popup_title:after { transform: rotate(-45deg); } .onetime_popup_content { padding: 60px 30px; text-align: center; }

JavaScript

<script type="text/javascript"> window.onload = function() { if( !localStorage.getItem('disp_popup') ) { localStorage.setItem('disp_popup', 'on'); var popup = document.getElementsByClassName('bg_onetime_popup'); popup[0].classList.add('js_active'); popup[0].onclick = function() { popup[0].classList.remove('js_active'); } } } </script>
  • ページ読み込み時に、localStorageの有無をチェックし、保存されていなければポップアップにクラスを設定して表示させます
スポンサー広告

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

<script> window.onload = function() { if( !sessionStorage.getItem('disp_popup') ) { sessionStorage.setItem('disp_popup', 'on'); var popup = document.getElementsByClassName('bg_onetime_popup'); popup[0].classList.add('js_active'); popup[0].onclick = function() { popup[0].classList.remove('js_active'); } } } </script>