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事件，我希望这会在页面加载时加载，而不是需要点击事件，但它无法正常工作。有什么想法吗？

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

Mabye你需要加载所有资源而不仅仅是dom。用于此用途：

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

浏览器通常会在页面载荷打开时阻止弹出的模态。这解释了为什么它在你点击时这样做。尝试禁用弹出窗口阻止程序。

在页面加载时运行一些javascript

3 个答案: