Magnificent popup inside popup

Question

In my project I'm using magnific popup. I need to actualize 2 popups (one inside another) with different options. First with only closeOnBgClick and second with both: closeOnBgClick and 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  
});

Here you can see what I mean: http://jsfiddle.net/pamjaranka/p1u2xdun/3/ The problem is, the second pop up is ignored it's options and used the same options as the first pop up. For clarity I added 'alignTop: true', which is also doesn't work. Is there any possibility to fix it? Thanks for help.

Answer 1

appears that once the popup is opened you need to close it and then call the second pop-up open method, otherwise the settings from the first one precede, thus, the overlay always closes the pop-up. Here is a brief change I made in your JS code:

// 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