华丽的弹出窗口内弹出

Magnificent popup inside popup

本文关键字：窗口      更新时间：2023-09-26

在我的项目中，我使用的是放大弹出窗口。我需要用不同的选项实现两个弹出窗口（一个在另一个里面）。第一个只有closeOnBgClick，第二个同时有：closeOnBg Click和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"，这也不起作用。有没有可能把它修好？谢谢你的帮助。

显示，一旦弹出窗口打开，您需要关闭它，然后调用第二个弹出窗口打开方法，否则第一个弹出窗口的设置在前面，因此，覆盖始终关闭弹出窗口。以下是我在你的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);
}

这是的jsfiddle

相关文章：