さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】magnificPopupの閉じるボタンを追加する方法

Pocket
LINEで送る

magnificPopupで表示したモーダルウィンドウを閉じるボタンをディフォルトのボタンとは別に追加する方法です。

javascript

$(document).on('click', '.closeButton', function (e) { 
	e.preventDefault();    
	$.magnificPopup.close();
});

上記のコードをmagnificPopupを呼び込むコードの下あたりに追加する。
「.closeButton」が追加するボタンのクラスになります。

また、ポップアップをiframeで表示している場合、iframe内に閉じるボタンを設置すると上記コードだけではクリックイベントが発動しません。
その場合は下記のようなコードを追加して、ポップアップを表示するボタン(ここでは「popup_link」クラスのボタン)をクリックしたらiframeの外側に閉じるボタンのコードが追加されるようにして対応する。

$(document).on("click", ".popup_link", function(e) {
	$(".mfp-iframe-scaler").append('<div class="closeButton"><img src="/img/pop_close.png" alt="CLOSE"></div>');
});

「.mfp-iframe-scaler」はiframeの親要素のクラスです。appendで「.mfp-iframe-scaler」の末尾に閉じるボタンのコードを追加しています。
これでiframeの一つ外側に閉じるボタンが設置されます。

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容