CODEWITHSUNDEEP
javascripthtml
sam
sam

Reputation: 11

Show modal dialog on page load

Fiddle: this is the link to my problem.

<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">close</a>
        <h2>Modal Box</h2>
    </div>
</div>

I want this modal box to open automatically when the page loads.

Upvotes: 0

Views: 3341

Answers (6)

lalitpatadiya
lalitpatadiya

Reputation: 720

do two changes in your jsfiddle code

step : 1) you add and jquery version form drop down.

step : 2) add bellow code in your code 

       $(document).ready(function() {
         $('a').get(0).click();
      });

and see it is working as you want and it also available in updated js link is "http://jsfiddle.net/RU5m8/11/"

i hope it helpfull to you

Upvotes: 0

Ashok Shah
Ashok Shah

Reputation: 956

Trigger click as the page loads...

$(document).ready(function(e)
{
    $("a")[0].trigger('click');
});

Upvotes: 0

Emilio Rodriguez
Emilio Rodriguez

Reputation: 5749

Try this in your javascript:

window.onload = function () {
    document.getElementById("openModal").style.opacity = 1;
}

it won't work in jsfiddle but it should be fine in your page

Upvotes: 1

Royi Namir
Royi Namir

Reputation: 148524

(damn this :target css lol)

The only methods that has onload are :Iframe,img , body. div doesn't has it.

Also - you have no function load and you have no function when clicking the div.

What you want is : to remove the load function since it doesn't exists and add this : 

$(function(){

    $("a:first")[0].click(); //simulate the behaviour which will 
                             //trigger that css `.modalDialog:target{...}`
});

http://jsfiddle.net/RU5m8/10/

Upvotes: 0

CodingIntrigue
CodingIntrigue

Reputation: 78525

Since you're using the :target selector, you can just set the window location on page load:

window.location.href = "#openModal";

http://jsfiddle.net/7LcRN/

In your implementation of the script (jsFiddle automatically adds an onLoad event for you), you will need to add an event to the page load to trigger this:

<body onload="window.location.href = '#openModal'">
    // Your HTML
</body>

Or using addEventListener:

window.addEventListener("load", function() {
    window.location.href = "#openModal";
});

I've also removed all references to your load() function, which doesn't exist. Also, <div> does not have the onload event.

Upvotes: 0

gaurav5430
gaurav5430

Reputation: 13882

seems like, initially the ModalBox is hidden, probably using

display:hidden

then 

$(documnet).ready(function{
   $('#openModal').css('display','block')
});

Upvotes: 0

Related Questions