web-dev-qa-db-ja.com

Magnific Popup：ポップアップフォーム内にカスタムの閉じるボタンを追加する方法

ポップアップで開くフォームがあり、送信ボタンの横にカスタムclose buttonを追加しました。

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

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

ただし、これは機能していないようです。誰でもこれを行う方法を知っていますか？

jquerymagnific-popup
7
user1448031

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

これを試して

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

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

</code>
</pre>
5
PaulusCh

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

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

お役に立てれば！

1
ChongFury

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

    });
1
Ghufran Yousafi

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

1
albert_rar

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');
 });

幸運を ：）

0
Aysad K.
$(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>
0
rvirk

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

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

ここでBootstrapリンクをボタンのように表示するためにも使用されるクラス-重要ではありません。

0
Demiurg

$ .magnificPopup.close（）; .. ajaxでロードされたコンテンツに入れれば機能します

0
Eugen G.