Magnific Popup: как добавить пользовательскую кнопку закрытия во всплывающую форму?

Если ваш фрагмент находится в вашем основном js, всплывающая кнопка ajax не может быть привязана к событию. Я представляю два решения:

Используйте "on" вместо "click": (не проверено)

$('#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>

Вам нужно добавить внутрь всплывающих окон параметры closeBtnInside:true.

Похоже на ошибку в великолепном всплывающем окне. Чтобы использовать кнопку внутри контейнера, вы должны указать 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

    });

Некоторые из этих ответов работают, но это зависит от вашей реализации всплывающего окна. Если у вас все еще возникают проблемы, я бы предложил использовать метод обратного вызова для обеспечения согласованности:

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

Надеюсь это поможет!

$ .magnificPopup.close (); .. будет работать, если вы поместите его в свой контент, загруженный с помощью ajax

1. Решение

Методы ниже не имеют сокращений, таких как "открыть" и "закрыть".

Их следует вызывать через объект-экземпляр. «instance» доступен только тогда, когда было открыто хотя бы одно всплывающее окно. Например: $ .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');
 });

удачи :)

Самый простой способ - добавить к вашему элементу управления класс «mfp-close», примерно так:

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

Здесь классы Bootstrap также используются для того, чтобы ссылка выглядела как кнопка - не имеет значения.