Javascript 华丽的内部弹出窗口

在我的项目中，我使用放大弹出窗口。我需要用不同的选项实现两个弹出窗口（一个在另一个里面）。第一个只使用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  
});

在这里你可以明白我的意思： 问题是，第二个弹出窗口忽略了它的选项，并使用了与第一个弹出窗口相同的选项。为了清晰起见，我添加了“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);
}

---

这很有效！谢谢。很抱歉，在我有足够的声誉之前，我无法将你的答案标记为有用。Fiddle更新为指向放大弹出窗口的cdn链接。