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

2019年6月6日jQuery

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

使いどころがかなり限定されるjQueryコード第3弾です。今回はテキストや画像のリンクをクリックすると、クリック先にジャンプする前にモーダルウインドウを表示させ、その後「閉じる」ボタンを押すとようやくリンク先にジャンプするというコードです。

DEMO

実際にどのような動きをするか、ひとまず下記のDEMO動作ページをご覧ください。
※jQuery本体のバージョンは3.3.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;
}

まとめ

冒頭にも書きましたが、これも使いどころがかなり限定されるコードではありますが、たとえばリンククリックの後に注意文を挟んだりする場合や、その他リンク先にジャンプする前にワンクッションを置きたいときなど重宝するコードだとは思います。

コードの間違いや、もっと簡潔にできるなどアドバイスなどがありましたらコメントいただければ大変嬉しいです。宜しくお願いいたします。

jQueryjavascript, jQuery, Lightbox, クリックイベント, モーダルウインドウ

Posted by シュウ