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 ind

Solution 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:

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:

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.