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/ 问题是，第二个弹出窗口被忽略了它的选项，并使用了与第一个弹出窗口相同的选项。为清楚起见，我添加了＆＃39; alignTop：true＆＃39;，这也是行不通的。有没有可能解决它？谢谢你的帮助。

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

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

1 个答案: