How to show div on page load?

Question

I am referring to following link:

http://netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html

Here, the div ( modal window ) is loaded after clicking on the link. I am trying to get rid of that link and open that modal on page load.

My code is as follows: Everything is same except I have added scripts and removed the link

<!DOCTYPE html>
<html>
<head>
    <title>Modal Window</title>
    <style type="text/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;
        }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("#openModal").show();
        });
    </script>

</head>
<body>
    <div id="openModal" class="modalDialog">
        <div>
            <a href="#close" title="Close" class="close">X</a>
            <h2>
                Modal Box</h2>
            <p>
                This is a sample modal box that can be created using the powers of CSS3.</p>
            <p>
                You could do a lot of things here like have a pop-up ad that shows when your website
                loads, or create a login/register form for users.</p>
        </div>
    </div>
</body>
</html>

Similar question is asked here: How to Auto Popup a CSS3 Modal Window When Page Loads?

But its not helping.

I have also tried following scripts without any luck:

$(document).ready(function() {
    $("#openModal").click();
});


$(document).ready(function() {
    $(".modalDialog").show();
});

I must be doing something wrong here.

Any ideas?

try $(document).ready(function() { $("#openModal").trigger('click'); }); — Charaf JRA, Dec 15 '13 at 20:21

robbmj · Accepted Answer · 2013-12-16T04:43:36.697

1

The problem is that .show() is not changing the opacity of $("#openModal")

do

$(document).ready(function() { 
    // the first arg is duration of the effect, second is the opacity to end at
    $("#openModal").fadeTo(500, 1);
});

Check out the Fiddle

As the OP pointed out the "dismiss Model Button" was not working

Updated Fiddle Demostrating a working dismiss button

edited Dec 16 '13 at 04:43

answered Dec 15 '13 at 20:33

robbmj

16,085
8
38
63

most of the chances are is that because of the modal is not initialized, but only shown. – Rafael Herscovici Dec 15 '13 at 20:56
I tried increasing the duration (fadeTo) as well. But no luck !! – Icarus3 Dec 15 '13 at 21:06
it is in milliseconds, so increase it to 1000 and you should notice the difference. – robbmj Dec 15 '13 at 21:10
@Icarus3, please checkout the new fiddle link – robbmj Dec 15 '13 at 21:21

score 0 · Answer 2 · answered Dec 15 '13 at 20:23

as @Charaf jra suggested, you should trigger the click with:

$(document).ready(function() { $("#openModal").trigger('click'); });

on the other hand, most of the chances are you can trigger it onload with:

$(document).ready(function() { $(".modalDialog").modal() }

score 0 · Answer 3 · answered Dec 15 '13 at 20:23

0

$(window).load(function(event){
    $(".modalDialog").show();
})

answered Dec 15 '13 at 20:23

Harsha Venkataramu

2,887
1
34
58

bad practice to use `setTimeout` you should get rid of it @harsha, unless you really must use it. – Rafael Herscovici Dec 15 '13 at 20:25
@Dementic : Okay , but would you let me know why it's a bad practice ? I wish to know. – Harsha Venkataramu Dec 15 '13 at 20:26
`setTimeout` does not guarantee that "ANY" object is loaded, or is there, also, it does not guarantee any function or anything is there. You should make checks to see if its there. *EDIT* and if you already validate those are there, then there is no reason to use `setTimeout` is there? – Rafael Herscovici Dec 15 '13 at 20:37

score 0 · Answer 4 · answered Dec 15 '13 at 20:28

0

To trigger click event , use trigger() :

$(document).ready(function() { 
    $("#openModal").trigger('click'); 
});

answered Dec 15 '13 at 20:28

Charaf JRA

8,249
1
34
44

score -2 · Answer 5 · answered Dec 15 '13 at 20:44

-2

You have opacity: 0; for .modalDialog. In this case you need to use fadeTo instead of show.

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $(".modalDialog").fadeTo(1,1);
    });
</script>

answered Dec 15 '13 at 20:44

bring2mind

1
1

Copying someone else's answer is a no no. Welcome to SO. – Rafael Herscovici Dec 15 '13 at 20:49

How to show div on page load?

5 Answers5