JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

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

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

sessionStorage

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

JavaScriptの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;
}