Adrien C.
Adrien C.

Reputation: 11

How to cancel opening popup with beforeClose callback ? #magnific-popup

I'm using a MagnificPopup with a beforeClose callback and I'd like to cancel its opening depending on a condition. How can I do that ?

I tried a return false, or a $.magnificPopup.close(); but it still opens...

I'm sure there is a basic solution !

Thanks

Upvotes: 1

Views: 1441

Answers (3)

P-S
P-S

Reputation: 4026

Use disableOn

disableOn: function(){
    if ($(window).width() <= 768){
        return false;
    }
    return true;
}

(Optional): This won't stop the default behavior of the DOM element triggering the popup.

If you're using an anchor tag that loads a Youtube video in a popup:

  • the disableOn will stop the popup from opening

  • the browser will follow the URL of the anchor tag's href!

To stop this from happening, add an additional check on the DOM element's click handler:

// Stop an anchor tag's default behavior
// Otherwise if it's a Youtube video, clicking this DOM element will land users on Youtube
$("a.my-popup").on("click", function(){
    if ($(window).width() <= 768){
        return false;
    }
});

Upvotes: 0

James Hibbard
James Hibbard

Reputation: 17765

It's a little bit tricky, but you can do it by opening the popup directly at initialization:

var popupDefaults = {
    type: 'inline',
    fixedContentPos: false,
    fixedBgPos: true,
    overflowY: 'auto',
    closeBtnInside: true,
}

$('.open-popup-link').on("click", function(){
    var condition = false;
    if(!condition){
      $(this).magnificPopup(popupDefaults).magnificPopup('open');
    }
});

fiddle

If you change the condition to true, the popup will not open.

Upvotes: 1

eventHandler
eventHandler

Reputation: 1211

what you can do is to overwrite the javascript function that creates the popup if your condition is true. like:

var originalOpen = window.open;
if (condition) {
    //prevent open new window
    window.open = function(){return null;};
}

// after window open attempt
window.open = originalOpen

you could do this with alert, and any kind of message box.

another way would be to modify magnificPopup...

Upvotes: 0

Related Questions