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-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

And to open the popup we have this link

<a href="#openModal">Open Modal</a>

I Tried this technique How to make a modal window in HTML5 and CSS3 popup automatically but it didn't work.. Please help.t thanks

ps: i also tried link click on page load using jQuery, but that also didn't work :( here is the jquery code.

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

});

its just css, please post your Jquery too, and have you try this: `window.onload = function () {$('a#openModal').click();}` ?? — egig, Apr 21 '13 at 00:41

score 9 · Answer 1 · answered Apr 21 '13 at 02:12

9

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>

answered Apr 21 '13 at 02:12

Wayne Tun

590
7
24

1

Yes it Finally Worked. thanks.. acutally i put a span tag inside tag. Thanks. – designerNProgrammer Apr 21 '13 at 17:19
Hi mate, Im trying to do the exact same thing, with the same link :) Could you precise hoew you used the span tag please? – xShirase Jun 21 '13 at 22:39
2

Hey XShirase the span tag works like its – designerNProgrammer Aug 25 '13 at 05:18

score 1 · Answer 2 · answered Apr 21 '13 at 01:05

1

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.

answered Apr 21 '13 at 01:05

egig

4,370
5
29
50

score 1 · Answer 3 · answered Jul 18 '13 at 03:44

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.

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

3 Answers3

Linked