【JS】location.hashを使ってモーダルウィンドウを出し分けよう!

こんにちは!@Higemuraです!

今回はJavaScriptの location.hash を利用して異なるモーダルウィンドウの出し分けを実装したいと思います!

実用例としてはTwitterやFacebookなどでシェアする際に記事のURL末尾に#ハッシュをつけてシェアします。

リンクをクリックしたユーザーはTwitterなら#_tw、Facebookなら#_fbがURL末尾に付くのでそのハッシュ値を検知して異なる動作をすることができる仕組みになります。

例としてTwitterもしくはFacebookからのリンクでアクセスしてきたユーザーに「それぞれののクーポンを表示する」というモーダルウィンドウを実装してみましょう。

実装例

まずはモーダルウィンドウ非表示状態はこんな感じです。
今回は動作の説明のための文言などが入っています。

URL検索欄に以下のようなハッシュをつけることによりモーダルウィンドウが表示される想定です!

ハッシュ値に #_tw ならTwitter用のモーダルウィンドウ#_fb ならFacebook用のモーダルウィンドウが表示されます!

 

実際のデモはCodePenで直接ご確認ください!(URL検索欄を使用する為、このサイト内の埋め込みでは動作しません、、)

See the Pen Hash Checked ModalWindow by Higemura (@Higemura) on CodePen.0

HTML

CSS(SCSS)

JavaScript

解説

HTML

最初に表示されている、モーダルウィンドウ以外の部分は contents というクラス名を指定

モーダルウィンドウのクラスは .modal とし、URLのハッシュ値によって クラス modalに設定してある data-hash が一致したら表示されます。

CSS(SCSS)

.modal 部分がモーダルウィンドウです。

&_label などSCSSを活用した記法になっています。

JavaScript

イベントを発火させるために .js-modal と .js-modal-close というjs-から始まるクラスを用意しました。

このようにCSSとJavaScript用のクラスを別に用意しておくことで、クラスを付け替えたり、変更した際に壊れる影響が少なくなります。

コード確認

まずはハッシュを検知するための location.hash とモーダルウィンドウのイベントを取得するためのクラスjs-modalを定義しておきます。

modalsをループさせてgetAttributeで modals の データ属性を取得(data-hash)します。(console.logで確認すると _twと _fb が取得できると思います)

location.hash で取得したハッシュ値と data-hash が一致したら一致した.js-modal にクラス名 -active を追加し表示させます。(CSSで-activeになるとdisplay: block; を付与します)

以下はモーダルウィンドウを閉じる動作です。

今回の目的である「ハッシュ値を検知して異なるモーダルウィンドを出し分ける」部分には必要ありませんが、閉じる動作があればユーザーに優しいですね。

今回の実装はモーダルウィンドウが表示されている際の透過黒地オーバーレイ部分をクリックしたら動作する仕様になります。

 

まとめ

location.hashを使ってモーダルウィンドウの出し分けを実装しました!

取得したハッシュ値をif文で条件分岐しているだけなので特に難しいことはありません。

#hash のようなハッシュはモーダルウィンドウ以外にページ内リンクなどにも良く使用されいるので色々な応用に使えますね。

今回の動作デモはCodePenのサイト内でご確認ください!

See the Pen Hash Checked ModalWindow by Higemura (@Higemura) on CodePen.0

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です