キレイなモーダルを簡単に実装できて重宝しているRemodalですが、アンカーで起動できない現象に遭遇しました:
<div class="remodal" data-remodal-id="my-remodal" data-remodal-options="hashTracking: false"> <button data-remodal-action="close" class="remodal-close"></button> <h1>Remodal</h1> <p> Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking. </p> <br> <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button> <button data-remodal-action="confirm" class="remodal-confirm">OK</button> </div>
<a href="#my-remodal">モーダルを開く</a>
原因はhashTracking: false
の指定でした。これをfalseにすると、モーダルを開いた際に#がつかないため、
ブラウザの閲覧履歴に影響がありません(「戻る」でモーダルが開くのを防げる)
ではどうすればよいかというと、アンカーをこのように書きます:
<a href="#" data-remodal-target="my-remodal">モーダルを開く</a>
ちゃんとドキュメント読まないとダメですね。