Запустите JavaScript при загрузке страницы

Question

Я тестирую этот простой код ниже, и он работает ...

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

} );

Однако, когда я запускаю приведенный ниже код, это не так, все, что я сделал, это удалил событие click, и я надеялся, что это загрузит страницу при загрузке, вместо того, чтобы нуждаться в событии click, но это не работает. Есть идеи?

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

} );

---

По запросу, функция openModal

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

Answer 1

Мабе, вам нужны все ресурсы для загрузки, а не только дом. Для этого используйте:

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

Answer 2

Попробуйте это:

$(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

Браузеры обычно блокируют всплывающие модалы, когда они открываются при загрузке страницы.Это объясняет, почему это работает, когда вы делаете это по клику.Попробуйте отключить блокировку всплывающих окон.