JQueryとWebStorageを使ったモーダルウィンドウ

年齢確認などで使えるモーダルウィンドウをプラグインを使わずJQueryとWebStorageだけで作ってみた。

2016 02 27 あんりあ

後で読む

モーダルウィンドウが必要になったのですが、いい感じのサンプルが見当たらなかったので作りました。理想としては、

一時的にデータを保存できる（複数ページで使うため）
プラグインを使わない

だったのですが、 Cookie を JQuery で扱うのはプラグインなしでは大変なので WebStorage を使ってみました。

デモを見る

デモのソースコードにライセンスがいるかわかりませんが、 CC0 ライセンスです。

ソースコードの説明

デモのソースコードに簡単な説明が書いてありますが、一部抜粋して説明します。

HTML

<section id="modal">
  <h2>ModalWindow</h2>
  <p>ダイアログが消えるまで下の「sessionStorageを削除する」のリンクは無効になっています。</p>
  <p>sessionStorageに値を書き込みますか？</p>
  <ul>
    <li id="modal-yes"><a>はい</a></li>
    <li><a>いいえ</a></li>
  </ul>
</section>

モーダルウィンドウは見えなくする部分（サンプルだと <div id="wrapper"> ）内には書かないでください。 opacity が適応され、クリックもできなくなります。

CSS

/* ダイアログは非表示にしておく */
#modal {
  position: fixed;
  z-index: 1;
  top: 10%;
  left: 50%;
  width: 80%;
  margin-left: -40%;
  text-align: center;
  border: solid 1px;
  background-color: #fff;
  display: none;
}
/* bodyにis-modal-visibleクラスがついたら表示 */
body.is-modal-visible #modal {
  display: block;
}
/* wrapperは透明度を指定 */
body.is-modal-visible #wrapper {
  opacity: 0.1;
}
/* リンクを無効化 */
body.is-modal-visible #wrapper a {
  pointer-events: none;
}

JQuery で body に is-modal-visible クラスをつけるので、それによって表示を切り替えます。 pointer-events でクリックを無効化できます。

Javascript

(function($) {
  $(function() {
    var $window = $(window),
      $body = $('body'),
      $yes = $('#modal-yes'),
      $remove = $('#modal-remove');
    // #modal-yesがあって、かつsessionStorageにKeyがなければ
    if ($yes.length && !sessionStorage.getItem('Key')) {
      // bobyタグにclass追加
      $body.addClass('is-modal-visible');
    }
    // #modal-yesがクリックされたら
    $yes.on('click',( function() {
      // bobyタグのclass削除
      $body.removeClass('is-modal-visible');
      // sessionStorageに対応してたらKey:Valueを追加
      if (window.sessionStorage) {
        sessionStorage.setItem('Key', 'Value');
      }
    }));
    // #modal-removeがクリックされたら
    $remove.on('click',( function() {
      // sessionStorageに対応してたらKey削除
      if (window.sessionStorage) {
        sessionStorage.removeItem('Key');
      }
    }));
  });
})(jQuery);

WebStorage の sessionStorage を使用しています。ウィンドウを閉じるとデータは破棄されるので、データを保持したい場合は localStorage に置換してください。簡単な流れとしては次の通り。