/ /壮大なポップアップ:ポップアップフォームの中にカスタムクローズボタンを追加するには? - jquery、magnific-popup

壮大なポップアップ:ポップアップフォームの中にカスタムクローズボタンを追加するには? - jquery、magnific-popup

私はポップアップで開き、カスタムを追加したフォームを持っています close button 送信ボタンの横に表示されます。

これは閉じるボタンに使用しているjQueryです:

$(document).ready(function() {
$("#close").click(function() {
$.magnificPopup.close();
});
});

しかし、これは動作していないようです。誰もこれを行う方法を知っていますか?

回答:

回答№1は8

スニペットがメイン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>

回答№2については4

これを試して

<pre class="default prettyprint prettyprinted">
<code>

$("#close").click(function(){
$(".mfp-close").trigger("click");
});

</code>
</pre>

回答№3の場合は1

内部のポップアップパラメータを追加する必要があります closeBtnInside:true.


回答№4の場合は1

それは壮大なポップアップのバグのようだ。コンテナ内のボタンを使用するには、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

});

回答№5の場合は1

これらの回答の一部は機能しますが、ポップアップの実装によって異なります。それでも問題が解決しない場合は、コールバックメソッドを使用して一貫性を確保することをお勧めします。

$.magnificPopup.open({
items: {
src: $domElement,
type: "inline"
},
callbacks: {
open: function() {
$("#close-btn").on("click",function(event){
event.preventDefault();
$.magnificPopup.close();
});
}
}
});

お役に立てれば!


答え№6の場合は0

$ .magnificPopup.close(); ..あなたがajaxでロードされたあなたのコンテンツにそれを入れるなら、うまくいくでしょう


回答№7は0

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.ソリューション

ポップアップ内にボタンを追加し、clickイベントに関数を割り当てることができます:

$("#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");
});

がんばろう :)


回答№8の場合は0

最も簡単な方法は、あなたのコントロールに "mfp-close"クラスを追加することです。

<a href="#" title="Close" type="button" class="btn btn-default mfp-close">閉じる</a>

ここでは、ブートストラップクラスも、ボタンのようなリンクを作るのに使われました。