如何延迟加载Boostrap模态，直到加载远程内容？

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()）