利用して異なるモーダルウィンドウの出し分けを実装したいと思います!実用例としてはTwitterやFacebookなどでシェアする際に記事のURL末尾に#ハッシュをつけてシェアします。リンクをクリックしたユーザーはTwitterなら#_tw、Facebookなら#_fbがURL末尾に付くのでそのハッシュ値を検知して異なる動作をすることができる仕組みになります。例としてTwitterもしくはFacebookからのリンクでアクセスしてきたユーザーに「それぞれののクーポンを表示する」というモーダルウィンドウを実装してみましょう。実装例まずはモーダルウィンドウ非表示状態はこんな感じです。今回は動作の説明のための文言などが入っています。一致したら表示されます。部分がモーダルウィンドウです。SCSSを活用した記法になっています。いうjs-から始まるクラスを用意しました。このようにCSSとJavaScript用のクラスを別に用意しておくことで、クラスを付け替えたり、変更した際に壊れる影響が少なくなります。モーダルウィンドウのイベントを取得するためのクラスjs-modalを定義しておきます。データ属性を取得(data-hash)します。{modals[i].classList.add('-active’);以下はモーダルウィンドウを閉じる動作です。今回の目的である「ハッシュ値を検知して異なるモーダルウィンドを出し分ける」部分には必要ありませんが、閉じる動作があればユーザーに優しいですね。今回の実装はモーダルウィンドウが表示されている際の透過黒地オーバーレイ部分をクリックしたら動作する仕様になります。.-activeを削除modals[i].classList.remove('-active');});まとめlocation.hashを使ってモーダルウィンドウの出し分けを実装しました!取得したハッシュ値をif文で条件分岐しているだけなので特に難しいことはありません。ようなハッシュはモーダルウィンドウ以外にページ内リンクなどにも良く使用されいるので色々な応用に使えますね。v3】指定座標をマップ上に表示させるこの記事を書いた人Higemura高卒フロントエンジニア高校卒業後にHTMLやCSSなどから独学で勉強していき、高卒FE(フロントエンジニア)として都内でフリーランスで活動中。高卒でもWebエンジニアとして活躍できることを証明する為、初心者でもわかりやすいWeb制作ノウハウを発信しています。コメントをキャンセルメールアドレスが公開されることはありません。目次HTMLCSS(SCSS)JavaScript解説HTMLCSS(SCSS)JavaScriptまとめサイト管理人Higemura高卒FE(フロントエンジニア)独学でWeb制作を勉強してフリーランスで活動しています。柴犬2匹飼っておりワンコについても呟いてます。