ポップアップで開くフォームがあり、送信ボタンの横にカスタムclose button
を追加しました。
これは、閉じるボタンに使用しているjQueryです。
$(document).ready(function() {
$('#close').click(function() {
$.magnificPopup.close();
});
});
ただし、これは機能していないようです。誰でもこれを行う方法を知っていますか?
スニペットがメインのjsにある場合、ajaxポップアップボタンがイベントにバインドされていない可能性があります。私は2つの解決策を想像します:
$('#close').on( "click", function() {
$.magnificPopup.close();
});
この関数をメインのjsに追加
function closePopup() {
$.magnificPopup.close();
}
ポップアップHTMLでこの種のボタンを使用
<button type="button" onClick="closePopup();">Close</button>
Iframe:
ボタンがiframeにあり、メインウィンドウのmagnificpopupスクリプトに同じドメイン上がある場合、上記の関数に次のようにアクセスできます。
<button type="button" onClick="parent.closePopup();">Close</button>
これを試して
<pre class="default prettyprint prettyprinted">
<code>
$('#close').click(function(){
$('.mfp-close').trigger('click');
});
</code>
</pre>
これらの回答の一部は機能しますが、ポップアップの実装によって異なります。それでも問題が解決しない場合は、コールバックメソッドを使用して一貫性を確保することをお勧めします。
$.magnificPopup.open({
items: {
src: $domElement,
type: 'inline'
},
callbacks: {
open: function() {
$('#close-btn').on('click',function(event){
event.preventDefault();
$.magnificPopup.close();
});
}
}
});
お役に立てれば!
壮大なポップアップのバグのようです。コンテナー内でボタンを使用するには、fixedContentPos:true;を指定する必要があります。
次のコードは私にとってはうまくいくようです。それが役に立てば幸い。
$('.ajax-popup-link').magnificPopup({
type: 'ajax',
removalDelay: 100, // Delay in milliseconds before popup is removed
mainClass: 'my-mfp-slide-bottom',`enter code here` // Class that is added to popup wrapper and background
closeOnContentClick: false,
closeOnBgClick: false,
showCloseBtn: true,
closeBtnInside: true,
fixedContentPos: true,
alignTop: true,
// settings: {cache:false, async:false},
callbacks: {
open: function () {
},
beforeClose: function () {
this.content.addClass('light-speed-out');
},
close: function () {
this.content.removeClass('light-speed-out');
}
},
midClick: true
});
内部にポップアップパラメータを追加する必要がありますcloseBtnInside:true
。
1。ソリューション
以下のメソッドには、「open」や「close」のような省略形がありません。
これらは「インスタンス」オブジェクトを介して呼び出す必要があります。 「インスタンス」は、少なくとも1つのポップアップが開かれたときにのみ使用できます。例:$。magnificPopup.instance.doSomething();
magnificPopupのカスタマイズされたクローズの例
// magnificPopupインスタンスを変数に保存します
var magnificPopup = $.magnificPopup.instance;
//壮大なインスタンスを開く
$.magnificPopup.open({
items: {
src: 'someimage.jpg'
},
type: 'image'
}, 0);
//現在開いているポップアップを閉じます
magnificPopup.close();
//ギャラリーが有効な場合のナビゲーション
magnificPopup.next(); // go to next item
magnificPopup.prev(); // go to prev item
magnificPopup.goTo(4); // go to item #4
//ポップアップコンテンツを更新します。 「アイテム」を変更した後に便利
magnificPopup.updateItemHTML();
2。ソリューション
ポップアップ内にボタンを追加して、次のようなクリックイベント時に関数を割り当てることができます。
$('#close-button-verify').click(function(){
//This will close the most recently popped dialog
//This method specially works for auto popped dialogs i.e.
//Popup you opened using $.magnificPopup.open()
$.magnificPopup.close();
});
OnClickイベントによってポップアップがトリガーされた場合、同じjQueryオブジェクトを使用してそのポップアップを閉じることができます
$('#close-button-verify').click(function(){
$('#id_of_button_that_opened_magnificpopup').magnificPopup('close');
});
幸運を :)
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline'
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
<div class="popup-modal mfp-hide">
<h1>Modal</h1>
<p>Modal Description.</p>
<p><a class="popup-modal-dismiss mfp-close-btn-in" href="#">Close</a></p>
</div>
最も簡単な方法は、次のような「mfp-close」クラスをコントロールに追加することです。
<a href="#" title="Close" type="button" class="btn btn-default mfp-close">閉じる</a>
ここでBootstrapリンクをボタンのように表示するためにも使用されるクラス-重要ではありません。
$ .magnificPopup.close(); .. ajaxでロードされたコンテンツに入れれば機能します