弹出窗口内的宏伟弹出窗口

Question

在我的项目中，我使用了 magnific popup。我需要用不同的选项实现 2 个弹出窗口（一个在另一个里面）。首先仅使用 closeOnBgClick，其次使用两者：closeOnBgClick 和 closeOnContentClick。

$('.popup-with-form').magnificPopup({
    type: 'inline',
    preloader: false,
    closeOnBgClick: true 
});
$('.popup-content-click').magnificPopup({
    alignTop: true,    
    type: 'inline',
    preloader: false,
    modal: true,
    closeOnBgClick: true,
    closeOnContentClick:true  
});

在这里你可以明白我的意思：http://jsfiddle.net/pamjaranka/p1u2xdun/3/ 问题是，第二个弹出窗口被忽略了它的选项，并使用了与第一个弹出窗口相同的选项。为了清楚起见，我添加了 'alignTop: true'，这也不起作用。有没有可能修复它？感谢您的帮助。

Answer 1

看来弹窗打开后需要关闭弹窗，然后调用第二个弹窗打开方法，否则第一个的设置在前面，所以叠加总是关闭弹窗。这是我对您的 JS 代码所做的简短更改：

// Assign on click behaviour to the button in the first pop-up
$('.popup-content-click').on('click', openPopup);

// on click handler
function openPopup(){
  //Closing the already opened pop-up    
  $.magnificPopup.close();
  //wait a bit then open the new pop-up
  setTimeout(function(){
    $.magnificPopup.open({
        items:{src: '#result-again'},
        type: 'inline',
        closeOnBgClick: false,
        closeOnContentClick:true
      });
  }, 100);
}

Here is the jsfiddle for that

弹出窗口内的宏伟弹出窗口

Magnificent popup inside popup

javascript

jquery

popup

magnific-popup