sessionStorage

JavaScriptのsessionStorageでそのページへ初回アクセス時にモーダルを表示

2022年3月1日2022年3月21日 5分

あまりユーザーライクなものではありませんが、初回閲覧時に「モーダル」を表示するスニペットです。

既にこの記事をご覧の方はモーダルが表示されたと思いますが、そのサンプルについてのコードを交え解説していきます。

sessionStorage
モーダルを表示させるボタン
サンプルのコード

sessionStorage

JavaScriptの sessionStorage は、設置したページのセッションが続いている間、情報を保存しておけるcookieよりも簡易に使うブラウザの保存領域です。

sessionStorageでは、ブラウザを開いてる間のみ動き、開いたタブかブラウザの閲覧が終了する時に消去されます。

参考 Window.sessionStorageMDN Web Docs

かかかず

詳しくは、毎度お馴染み「MDN Web Docs」がわかりやすいので、ご覧ください。　

モーダルを表示させるボタン

モーダルは、このページの初回アクセス時に表示されますが、以下のボタンクリックで意図的に「初回閲覧時」の状態にしてモーダルを表示させることができます。

困った人

おっと・・。モーダルを見逃した・・・。

と2回目以降や既にモーダルを閉じてしまった方は、クリックしてご覧ください。

かかかず

もしくは、このページを表示したタブやブラウザを閉じて開くともう1回表示されます。

サンプルのコード

コードは、HTML・JavaScript・CSSの3種です。順に解説していきます。

HTML

HTMLは、表示されるモーダルのコードで「firstTimeModal」のidを持つ要素の中に、モーダルを閉じるボタンや、モーダルで表示する中身を記述します。

<div class="popup" id="firstTimeModal">
  <div class="popup-inner">
    <div class="modalCloseButton" id="modalCloseCloss"><span class="lineClose"></span></div>
    <img src="https://dubdesign.net/wp-content/uploads/2022/02/java_modaltoc-1024x587.jpg" alt="ポップアップ画像">
    <div class="modalBottom"><p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市。</p></div>
  </div>
  <div class="black-background" id="js-black-bg"></div>
</div>

JavaScript

JavaScriptは、sessionStorage の「keyName = viewed」の有無で分岐してない場合にはモーダルを表示。ある場合には、何も表示をしない分岐です。

const keyName = 'viewed';
const keyValue = true;

if (!sessionStorage.getItem(keyName)) {
    sessionStorage.setItem(keyName, keyValue);

    console.log("初回の閲覧");
window.onload = function() {
  var popup = document.getElementById('firstTimeModal');
  if(!popup) return;
  popup.classList.add('is-show');

  var blackBg = document.getElementById('js-black-bg');
  var closeBtn = document.getElementById('modalCloseCloss');

  closePopUp(blackBg);
  closePopUp(closeBtn);

  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      popup.classList.remove('is-show');
    })
  }
}
} else {
    console.log("2回目以降の閲覧");
}

keyNameがある場合には、モーダルの他にそのモーダルウィンドウを閉じるクリックイベントを .addEventListener で作り、閉じるトリガーになるものをその中で指定します。

CSS

CSSは、HTMLで記述するモーダルの見た目を整える内容で、「.is-show」のclassが付くものはJavaScriptでモーダルの表示になった時の記述です。

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  background-color: #fff;
  z-index: 2;
  border-radius: 3px;
}
.popup-inner img {
  width: 100%;
  border-radius: 3px 3px 0 0;
}
div#modalCloseCloss:hover {
    opacity: 0.7;
}
.modalCloseButton {
    position: absolute;
    left: 92%;
    top: -48px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}
.lineClose {
    display: inline-block;
    vertical-align: middle;
    color: #FFF;
    line-height: 1;
    width: 2rem;
    height: 0.2rem;
    background: currentColor;
    border-radius: 0.1rem;
    position: relative;
    transform: rotate(45deg);
}
.lineClose::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  z-index: 1;
  cursor: pointer;
}
.modalBottom {
    padding: 22px 30px;
}
.modalBottom p {
    margin: 0;
}