CODEWITHSUNDEEP
jqueryhtmlonload
mikepreble
mikepreble

Reputation: 269

jquery show overlay div on page load

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

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

BTW, I've searched around a decent amount but can't find something simple that my jquery simple mind can figure out.

Thanks for your help.

Upvotes: 4

Views: 22105

Answers (6)

Anand Roshan
Anand Roshan

Reputation: 355

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 full tutorial and download source code.

Upvotes: 0

jazkat
jazkat

Reputation: 5788

I combined these two tuts How to create a stunning and smooth popup using jQuery and Modal box on page load with jquery fancy box and cookie plugin.

Upvotes: 0

brettkelly
brettkelly

Reputation: 28205

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

That help?

Upvotes: 1

James Allardice
James Allardice

Reputation: 165971

Have a look at jQuery UI Dialog widget. Or search for "jQuery lightbox". The general idea is to use an absolutely positioned div set to display:none, and change it to be display:block when required.

Upvotes: 2

Bryan A
Bryan A

Reputation: 3634

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

Upvotes: 0

Scott Rippey
Scott Rippey

Reputation: 15810

I think what you're talking about is called a "modal" dialog.

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

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

From the simplemodal site:

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

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

Upvotes: 3

Related Questions