Question

我正在远程加载内容：

$('a[rel=modal]').on('click', function(evt) {
    evt.preventDefault();
    var modal = $('#modal').modal();
    modal
        .find('.modal-body')
        .load($(this).attr('href'), function (responseText, textStatus) {
            if ( textStatus === 'success' || 
                 textStatus === 'notmodified') 
            {
                modal.show();
            }
    });
});

问题是模态显示，1-2秒后内容显示在内部并扩展模态，所以它有点“跳跃”。有没有办法延迟加载模态，直到收到内容为止？

Answer 1

夏季开发者的评论是正确的。在您提出请求之前，$('#modal').modal();会显示您的模式。您应该在.load()的回调函数中显示模态，该函数在请求完成后触发。以下是如何使用最少的代码更改使其工作：

$('a[rel=modal]').on('click', function(evt) {
    evt.preventDefault();
    var modal = $('#modal');
    modal
        .find('.modal-body')
        .load($(this).attr('href'), function (responseText, textStatus) {
            if ( textStatus === 'success' || 
                 textStatus === 'notmodified') 
            {
                modal.modal("show");
            }
    });
});

注意我从jquery对象中删除了.modal()调用，然后我使用modal.modal("show")这可能就是你想要做的（而不是.show()）

在加载远程内容之前，如何延迟加载Boostrap模式？

1 个答案: