Tweet

Pocket

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の一つ外側に閉じるボタンが設置されます。