通过远程URL加载Bootstrap模态框的内容，等待模态框完全加载内容后再显示。

Question

我能够通过远程URL将内容加载到Bootstrap模态框中，但问题在于模态窗口打开了，但是内容没有加载。

一旦内容被加载，模态框的主体将更新，高度会扩展以适应模态框的内容。

然而，我希望只有在内容完全加载后才显示模态框，并在加载时显示动画GIF。

我查看了文档，但没有看到任何关于模态框加载回调的内容。我希望在回调触发之前保持模态隐藏并显示它。

我该怎么做？

- Masu

---

在 ajax 方法的成功回调执行之前，请勿显示模态框。http://api.jquery.com/load/#callback-function - Kevin B

你可以进行 AJAX 调用，在 success 中，使用通过 AJAX 下载的 HTML 追加到模态框中。这应该足够了，除非它是一个需要提交的表单或其他需要指向你的服务器的操作（因为表单的 action 等会指向你的服务器，除非它是绝对路径）。 - RaphaelDDL

谢谢大家！有了你们的建议，我搞定了。 - Masu

Answer 1

感谢以上评论，我通过上述评论得到了答案。我使用以下JavaScript代码将触发弹出窗口的锚点的远程URL存储为数据属性（'data-href'），并将锚点类名设置为“popup-links”：

$jq191('.popup-links').on( 'click', function( e ){
    var remote= $jq191( this ).data( 'href' );
    $jq191('.modal-body').load( remote, function( e ){
        $jq191( '#myModal' ).modal( 'show' );
    });
});

- Masu