'How to make a modal window in HTML5 and CSS3 popup automatically

I found some code online allowing me to create and design a modal window for visitors to sign up to our newsletter, but i want this modal window to popup automatically when the index page is opened. So far i have only been able to find modal windows that rely upon the user clicking on a hyperlink. Is there a function i can use to automatically open the modal window or a way to automatically load a hyperlink.

This is the link i used to create my modal window. Link

htmlcssmodal-dialog


Solution 1:[1]

You can use keyframe animations (support). Something like:

.modalDialog {
   /* other styles */
   animation: showup .5s;
}
@keyframes showup { to { opacity: 1; } }

Be careful with pointer-events though. They won't work in any version of IE or Opera - see support for pointer-events in CSS.

A really simple demo I just did.

Solution 2:[2]

Try this it worked for me

<script type="text/javascript">    
    $(function () {    
        $("#dialog").dialog({    
            modal: true,    
            autoOpen: false,
            title: "jQuery Dialog",    
            width: 300,    
            height: 150    
        });    
        $("#btnShow").click(function () {    
            $('#dialog').dialog('open');    
        });    
    });    
</script>

Reference: Open-Show-jQuery-UI-Dialog-Modal-Popup-on-Button-Click

Solution 3:[3]

You can always enclose the link to modal window in a span or div. then on page load using jquery use the .click() function to autoload it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Keyur Potdar
Solution 3 designerNProgrammer

Related Questions