How to make a modal window in HTML5 and CSS3 popup

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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.