remodal.jsがブラウザバックで再表示されるときは、hashTracking: false,にします【使い方・オプション】

  • 投稿日
  • 著者 アバター しんぺー
  • カテゴリー Code
  • カテゴリー jQuery

ブラウザの戻るボタン押すとモーダル開くのなおしたい。

しんぺー

remodal.jsの中の記述を変更するだけです。
hashTracking: true,から
hashTracking: false,に変更すればOKです。

解決方法

remodal.jsの中のDefault settingsの箇所を修正すれば解決します。
下記はremodal.jsの62行目あたりです。
この箇所のhashTracking: true,をfalseにします。

remodal.jsの62行目あたり

  /**
   * Default settings
   * @private
   * @const
   * @type {Object}
   */
  var DEFAULTS = $.extend({
    hashTracking: false, // ここをtrueからfalseに変更します。
    closeOnConfirm: true,
    closeOnCancel: true,
    closeOnEscape: true,
    closeOnOutsideClick: true,
    modifier: '',
    appendTo: null
  }, global.REMODAL_GLOBALS && global.REMODAL_GLOBALS.DEFAULTS);

以上です〜。

試したこと（公式ドキュメントを見たが解決しなかった）

公式ドキュメントにも2パターンくらい解説があったのですが、なぜか解決できませんでした。
どこが間違ってたんだろ。。

公式ドキュメントの解法①

remodal.jsの読み込みの前にDefaultsの設定を記述する。

<script>
window.REMODAL_GLOBALS = {
  NAMESPACE: 'modal',
  DEFAULTS: {
    hashTracking: false
  }
};
</script>
<script src="../dist/remodal.js"></script>

エラーになった。
エラーが消えてもremodal.js内に

があるので、上書きされる気がする。

公式ドキュメントの解法②

HTMLにdata属性（data-remodal-options="hashTracking: false"）を追加する方法。

<div class="remodal" data-remodal-id="modal" data-remodal-options="hashTracking: false">

な〜んにも起きない。エラーも出ない。シーーン。

やっと解決

公式ドキュメントを見てもうまくいかず途方にくれていましたが、remodal.jsの中身を眺めているとhashTrackingの記述があったので、この箇所を直接変更するとうまくいきました。

StackOverFlowにも公式ドキュメントと同じ記述していたので、自分のやり方が間違っているだけかと思いますがremodal.jsを直接書き換えると一発でした。

最後に

短い記事ですが結構苦戦したので記事にしました。
この記事があなたの助けやヒントになっていれば幸いです。
最後までありがとうございました。