How to Auto Popup a CSS3 Modal Window When Page Loads?

Question

i am trying to figure this out.How o i make it work on page Load.

my css

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-         


        

Answer 1

Answer 1 sort of works, in firefox it will display the modal, however it will not allow it to be closed properly. In chrome, it will not open on load at all. In the end, even when it will work, it just starts the animation sequence again and loads it in a way that will not allow it to be closed.

Answer 2

load() is deprecated as version 1.8, My suggestion:

window.onload = function (){
    $("#preloader").delay(1000).fadeOut(1000);
    $('#notLoggedModalClick').click();
}

but its better if you directly fire the popup instead of click the trigger.

Answer 3

set a div

<div id="popup">
        text here...
</div>

at style set display:hidden

#popup
{
    position:absolute;
    display:none;
    top:200px;
    left:50%;
    width:500px; 
    margin-left:-250px;
    border:1px solid blue; 
    padding:20px;
    background-color:white;
}

when page is loaded just set display:block

<script type="text/javascript">
    function show_popup()
    {
      document.getElementById('popup').style.display = 'block'; 
    }

    window.onload = show_popup;
</script>