Run some javascript on page load

Question

I am testing this simple code below and it works...

$(document).ready( function() {
 $('.show-modal').click( function() {
 $('#modal-box').css( {
 left: $(window).width() / 2 - $('#modal-box').width() / 2,
 top: $(window).height() / 2 - $('#modal-box').height() / 2
 } );
 //delay(openModal, 500);
 openModal();
 } );
} );

However when I run the code below it does not, all I have done is removed the click event and I was hoping this would load on page load instead of needing a click event but it is not working. Any ideas?

$(document).ready( function() {
 $('#modal-box').css( {
 left: $(window).width() / 2 - $('#modal-box').width() / 2,
 top: $(window).height() / 2 - $('#modal-box').height() / 2
 } );
 //delay(openModal, 500);
 openModal();
} );

---

As requested, the openModal function

openModal = function () {
 $('#modal-box').show();
 $('#modal-mask').show();
};

• Andreas Wong: can you show what openModal() does?
• JasonDavis: @NiftyDude I have added it above

Answer 1

Mabye you need all resources to be loaded instead of just the dom. For this use:

$(window).load(function () {
 // images and stuff will be loaded
});

• booyaa: if this fixed it, can you accept the answer so @yoshi can get the rep points. cheers!
• JasonDavis: @booyaa I always do, it makes you wait 10 minutes though

Answer 2

Try this:

$(document).ready( function() {
 $('#modal-box').css("left", (($(window).width()/2) - ($('#modal-box').width()/2)) + 'px');
 $('#modal-box').css("top", (($(window).height()/2) - ($('#modal-box').height()/2)) + 'px');
 //delay(openModal, 500);
 openModal();
} );

Answer 3

Browsers usually block popped up modals when they are opened onLoad of a page. That explains why it works when you do it on click. Try disabling your pop up blockers.

• Ramesh: It is a div and not a new Window. Only new popup windows will be blocked.