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();
};

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
});