弹出窗口内的华丽弹出窗口

Question

在我的项目中，我使用了宏伟的弹出窗口。我需要用不同的选项实现 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