CODEWITHSUNDEEP
magnific-popup
Plausibly Deniable
Plausibly Deniable

Reputation: 461

How to prevent close

I've got some form controls in my popup, and would like to prevent the user from closing it if the form is invalid.

I tried this just as a test, but the popup still closes when the user clicks the close button, etc.

$.magnificPopup.open({
            items: {
                src: '#topic'
            },
            type: 'inline',
            removalDelay: 500, //delay removal by X to allow out-animation
            mainClass: 'mfp-3d-unfold',
            closeMarkup: '<button title="Close (Esc)" type="button" class="mfp-close"></button>',
            midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
            callbacks: {
                beforeClose: function () {
                    // Callback available since v0.9.0
                    return false;
                },
                close: function () {
                    // Will fire when popup is closed
                    return false;
                }
            }
        });

Upvotes: 2

Views: 8140

Answers (2)

Alexey Chesnokov
Alexey Chesnokov

Reputation: 1

I finally found the solution on GitHub

You need to replace the following line of the code

// if click is outside the content
if( (target !== mfp.content[0] && !$.contains(mfp.content[0], target)) ) {

with

// if click is outside the content
if( (target !== mfp.content[0] && !$.contains(mfp.content[0].parentElement, target)) ) {

It fixed the problem for me.

Upvotes: 0

BellamyStudio
BellamyStudio

Reputation: 771

According to the docs, if you add closeOnContentClick: false as an option, the window shouldn't close. 

magnificPopup.open({
            items: {
                src: '#topic'
            },
            type: 'inline',
            closeOnContentClick: false,
            removalDelay: 500, //delay removal by X to allow out-animation
            mainClass: 'mfp-3d-unfold',
            closeMarkup: '<button title="Close (Esc)" type="button" class="mfp-close"></button>',
            midClick: true
        });

However, I've been trying to get an ajax window to not close when there's a click inside it (a form) and adding this option doesn't work at all (it may well work for inline though). The only way I've been able to get it to work so far is by adding a class of mfp-prevent-close to all of the child nodes within the popup (eg all of the form input fields, the surrounding fieldset etc).

Hope this helps anyway :)

Upvotes: 3

Related Questions