Jquery show overlay div on page load

Question

I want to do something that I saw a lot of onclick examples, but I want to load the div when the user goes to the page. Even StackOverflow does this (onlcick) when you try to insert a hyperlink.

How can I make an overlay div when a page loads using jquery?

By the way, I searched around a decent amount, but cannot find something simple that my simple jQuery can understand.

Thank you for your help.

Answer 1

I think what you are saying is called a “modal” dialogue.

There are many modal dialog plugins for jQuery. My favorite is "simple."

It is available here: http://www.ericmmartin.com/projects/simplemodal/ The samples are great too!

From a simple site:

As a jQuery chaining function, you can call the modal () function on the jQuery element and the modal dialog will be displayed using the contents of that element. For instance:

$ ("element-id #") modal () ;.

Answer 2

Take a look at the jQuery UI Dialog Widget. Or search for "jQuery lightbox". The general idea is to use the absolutely positioned div set display:none and change it to display:block if necessary.

Answer 3

 $(function(){ // this will run when the document.ready event fires $("#myDivOverlay").show(); // this will show a div whose id is myDivOverlay }); 

What will help?

Answer 4

  $(document).ready(function() { $thing = $("<div class='newDiv'>"); $("body").append($thing); }); 

Answer 5

I combined these two links How to create a stunning and smooth popup using jQuery and a Modal Page Load Window using jQuery fancy box and cookie plugin .

Answer 6

You can try this.

 <script type="text/javascript"> $(document).ready(function() { $(window).load(function() { $('#loading').fadeOut(3000); //fadeout the #loading div after 2000 milliseconds }); $('#loading').css('height','100%'); //Put 100% height to the div }); </script> 

See the full tutorial and download the source code .