Open/close popup from javascript (without link)

[andronix83]

I'm working on implementing a login popup window using this framework and stuck with the issue of how to programmably open and close some specified popup without having a corresponding link?
Your documentation is great, but unfortunately I haven't found anything in this regard.
Could you please provide some handy API just to open and close specific popup?
Thank you in advance for your answer!

[dimsemenov]

http://dimsemenov.com/plugins/magnific-popup/documentation.html#public_methods

[andronix83]

Ok, but your example with image type popup was not really helpful in my case, because my popup is based on hidden div (inline type) and it is not obvious how to pass an id of my div (which is normally specified in href attr of the link) to the config.

[dimsemenov]

Here is some info about how to create inline element http://dimsemenov.com/plugins/magnific-popup/documentation.html#content_types

If you wish this to be documented differently, please submit commit.

[hisnameisjimmy]

We wanted to do this too, and we came up with a workaround that seems to fit the bill. In our case we wanted a popup to fire based on whether or not a user was new to our application. To do this we wanted an inline div with content to be executed on login without clicking a link.

We used the following test HTML that was in Dmitry's documentation along with adding the styling for the css:

HTML

<div id="test-popup" class="white-popup">
    Popup content
</div>

CSS

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

We then targeted the div and fired the popup/modal with jQuery. It's a bit of a kludge, but it works. You might not need the if statement, it's basically saying "if this div exists, then execute the popup".

if ($('#test-popup')[0]) {
    $.magnificPopup.open({
        items: {
            src: $('#test-popup')[0].outerHTML
        },
        type: 'inline'
    });
}

[dimsemenov]

You may do just:

if ($('#test-popup').length) {
    $.magnificPopup.open({
        items: {
            src: '#test-popup' 
        },
        type: 'inline'
    });
}

Or (no need for outerHTML stuff)

var el = $('#test-popup');
if (el.length) {
    $.magnificPopup.open({
        items: {
            src: el
        },
        type: 'inline'
    });
}

[Molosc]

Hi
I want to do the same but with ajax type content. Is there an issue?
I'm trying with this but it don't work :

$.magnificPopup.open({
            type: 'ajax',
            items: {
                src: '/service'
            },
            callbacks: {
                updateStatus: function(data) {
                    console.log('Status changed', data.status);
                }
            }
        }, 0);

[rmoddel]

@Molosc I got it working using if(data.status === "ready") inside updateStatus

[Molosc]

Nop, it's not working directly.
Now I'm not using the ajax feature of the magnificPopup, I'm using ajax in my code and I fill the popup before open it.

[ghost]

Thanks Dmitry!

[Ameesh]

Thank you

[thinkluke]

Uncaught TypeError: Cannot read property 'parsed' of undefined
at t.updateItemHTML (plugins.js?ver=4.8:220)
at t.open (plugins.js?ver=4.8:220)
at Object.open (plugins.js?ver=4.8:220)
at HTMLAnchorElement. (custom.js?ver=4.8:36)
at HTMLAnchorElement.dispatch (jquery.js?ver=1.12.4:3)
at HTMLAnchorElement.r.handle (jquery.js?ver=1.12.4:3)

[sarwarcse]

I have done it like this.
$('<a data-effect="mfp-move-from-top" href="you link">').magnificPopup({ type: 'ajax' }).click();

//or

$('<a data-effect="mfp-move-from-top">').attr("href","yourlink").magnificPopup({ type: 'ajax' }).click();

You can try this . Hope it will work