how to fire an onload event with Jquery?

Question

I am having a div and I want to style that div on page load with Jquery. The popup works fine But how can I fire it when the page loads.

<div id="popup">
   //Some content 
</div>

Below is the Jquery Code

$(document).ready(function() {
        $('div#popup').load(function() {
                           // Popup Content
}
}

I even tried a simple alert message but doesnt work.

Thanks

Answer 1

If you just want to style it do this:

$(document).ready(function() {
     $('div#popup').css({
           width: '100px',
           height: '100px' //etcetera
     });
});

Answer 2

All you need is the outer wrapper:

$(document).ready(function() {
    //do something here
}

The $(document).ready closure doesn't execute until the entire DOM has been loaded.

Answer 3

If you're using the jQuery UI Modal dialog then just make sure autoOpen isn't set to false in your dialog constructor. You'll notice that by default the autoOpen attribute is set to true so the standard behavior is to pop up the dialog automatically on page load. If this isn't happening, debug your page and be certain that your dialog constructor is being properly initialized on document ready.

Check out the "Options" tab on the jQuery UI demo page . The second option autoOpen contains documentation on the default behavior of the jQUI dialog's popup behavior.

The following code would be all it would take to do what you want to pop up a modal window. Remove the options parameter altogether if you need to to remove the modal behavior:

$(function() {
    $("div#popup").dialog({
         modal: true
    });
});