javascript - how to load magnific popup modal on page load - Stack Overflow

admin管理员组

文章数量:1341690

I'm trying to load my magnific popup modal on page load, however I can't quite understand the syntax in the documentation. How do I call the modal on page load?

My HTML:

<div id="test-modal" class"white-popup-block mfp-hide">
    <h1>Modal Test</h1>
    <p>
    Test Some text.
    </p>
    <p>
    <a class="popup-modal-dismiss">Dismiss</a>
    </p>
</div>

My JS:

$(window).load(function(){

???? What code should I place???
});

I have already preloaded the script and css files, what do I type inside the JS to make it load the popup on load?

I'm trying to load my magnific popup modal on page load, however I can't quite understand the syntax in the documentation. How do I call the modal on page load?

My HTML:

<div id="test-modal" class"white-popup-block mfp-hide">
    <h1>Modal Test</h1>
    <p>
    Test Some text.
    </p>
    <p>
    <a class="popup-modal-dismiss">Dismiss</a>
    </p>
</div>

My JS:

$(window).load(function(){

???? What code should I place???
});

I have already preloaded the script and css files, what do I type inside the JS to make it load the popup on load?

• javascript
• jquery
• onload
• magnific-popup

Share Follow asked Dec 10, 2013 at 23:59 marchemikemarchemike 3,2771313 gold badges6060 silver badges9999 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Try this:

$.magnificPopup.open({
    items: {
        src: '<div id="test-modal" class="white-popup"><h1>Modal Test</h1><p>Test Some text.</p><p><a class="popup-modal-dismiss">Dismiss</a></p></div>',
        type:'inline'
    },
    modal: true
});

And the fiddle...

$.magnificPopup.open({items: {src: '#id-of-your-popup'},type: 'inline'}, 0);

You can try this:

    $.magnificPopup.open({
        items: {
            src: 'images/loading.gif',
            type:'image'
        },
        modal: true
    });

本文标签： javascripthow to load magnific popup modal on page loadStack Overflow