如何在加载远程内容之前延迟加载 Bootstrap 模式？答案

【问题标题】：How do I delay the loading of a Boostrap modal until the remote content is loaded?如何在加载远程内容之前延迟加载 Bootstrap 模式？
【发布时间】：2016-09-06 23:53:40
【问题描述】：

我正在像这样远程加载内容：

$('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 秒后内容显示在里面并展开模态，所以有点“跳跃”。有没有办法将模式的加载延迟到收到内容之后？

【问题讨论】：

当您使用$('#modal').modal(); 时会调用该模式，这就是您在加载内容之前看到它的原因。我不确定你为什么使用.show()，它不用于动画，而且似乎与api.jquery.com/show 无关。而不是使用 .load() 使用 ajax 请求和成功调用并填充模式。

标签： javascript jquery twitter-bootstrap synchronization bootstrap-modal

【解决方案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()）

【讨论】：

太棒了，非常感谢！阅读评论后，我开始尝试找到一种重写所有内容的方法，但这解决了我所有的问题谢谢！ :)