【jQuery】リンククリックでジャンプする前にモーダルウインドウを表示

使いどころがかなり限定されるjQueryコード第3弾です。今回はテキストや画像のリンクをクリックすると、クリック先にジャンプする前にモーダルウインドウを表示させ、その後「閉じる」ボタンを押すとようやくリンク先にジャンプするというコードです。
DEMO
実際にどのような動きをするか、ひとまず下記のDEMO動作ページをご覧ください。
※jQuery本体のバージョンは3.3.1を使用しているので古いバージョンによっては動かない可能性がありますが、コード数は少ないので1系でも問題ないと思います。
設置方法
jQuery本体の読み込み
CDNで配布されています。下記コードをそのまま<head>内に記述します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
jQuery実行コード
こちらのコードをjQuery本体よりも下部に記述します。
$(function(){ //配列の準備 linkArray = []; //overlayを非表示 $('.overlay').hide(); //ページ全体のmodalクラスの数を調べる linkNum = $('a.modal').length; //ページ中のすべてのリンクを取得して配列に入れる //ページ中すべてのリンクにid属性を連番で付ける for(i=0;i<linkNum;i++){ linkArray[i] = $('a.modal').eq(i).attr('href'); $('a.modal').eq(i).attr('id','n'+i); } //ページ中のaタグがクリックされたら動作 $('a.modal').click(function(){ //aタグのリンクを無効化 event.preventDefault(); //クリックされたmodalクラスのidを取得 clickLink = $(this).attr('id'); //overlayの表示 $(".overlay").show(); }); //閉じるボタンをクリックしたら動作 $('button').click(function(){ //IDに関連するリンク先に飛ばす open( $('a#'+clickLink).attr('href'),"_blank"); }); });
このコードの簡単な解説
このコードで大事なのは、モーダルウインドウを挟みたいaタグにmodalクラスをHTML側で付与して、通常リンクと分けているところです。
7行目でページ全体のa.modalの数を調べて、該当するaタグに連番でidを付与し、11行目から配列でリンク先を保存しています。
19行目ではpreventDefault();でaタグのクリックイベントを実行しないようにしています。
27行目以降は、モーダルウインドウ内のボタンクリックの処理です。buttonタグクリックをトリガーとしていますが、ここは適宜変更して下さい。
HTML
モーダルウインドウ表示部分
まずは<body>直下に下記のコードを加えます。
<div class="overlay"> <div class="btn_area"> <p>下部の<span class="red bold">閉じるボタン</span>を押すと最初にクリックしたリンク先へジャンプします。</p> <button>閉じるボタン</button> </div> </div>
モーダルを表示させたいリンク部分
例のように、モーダルを表示させたいaタグにmodalクラスを付与します。HTMLはこれだけです。
<a href="https://www.google.co.jp/" class="modal">Googleへのリンク</a>
スタイルシート
こちらも既存クラスなどの状況に合わせてカスタマイズしてください。overlayクラスの親要素にはposition:relative;プロパティを追加してください。動作DEMOページではbodyタグにrelativeを指定しています。
.overlay{ width:100%; height:100%; background: rgba(0,0,0,0.6); position:fixed; z-index:1; } .btn_area{ width:300px; height:240px; position:absolute; top:50%; left:50%; margin-top:-120px; margin-left:-150px; background-color:#fff; z-index:2; } .btn_area p{ padding:15px; } .btn_area button{ display:block; margin:0 auto; }
まとめ
冒頭にも書きましたが、これも使いどころがかなり限定されるコードではありますが、たとえばリンククリックの後に注意文を挟んだりする場合や、その他リンク先にジャンプする前にワンクッションを置きたいときなど重宝するコードだとは思います。
コードの間違いや、もっと簡潔にできるなどアドバイスなどがありましたらコメントいただければ大変嬉しいです。宜しくお願いいたします。
ディスカッション
コメント一覧
こんにちは。
リンク先へジャンプさせる前に説明文を読ませたく探していましたが、わかりやすい解説でぴったりなコードをありがとうございます。
ジャンプさせることが目的ですが、考え直したいユーザー向けに「キャンセル」ボタンも設置したいと考えています。そのようなコードを追加することは可能でしょうか。
robotch様
コメントありがとうございます。
キャンセルボタンについては当ページの「動作デモページ」に追加してみましたので、
そのページのソースコードと合わせてご確認ください。
HTML側では「閉じるボタン」コードの下にキャンセル用の要素を追加したこと、
js側では //キャンセルボタンをクリックしたら動作 の4行を追加致しました。
キャンセル用の要素をクリックすれば、オーバレイ部分を逆に非表示にする動作で可能かと思います。
宜しくお願い致します。
こんにちは。
探していたものにまさにマッチするコードをありがとうございます。
リンク先へジャンプする前に同意に使いたいと思っています。そして、2回目以降はダイレクトにジャンプさせていのですが、”【jQuery】初回アクセス時のみポップアップ表示(jquery.cookie.js使用)” との合わせ技で実現可能でしょうか。