twitter-bootstrap - Bootstrap 3 与远程 Modal

Question

我刚刚使用新的 Twitter Bootstrap 版本启动了一个新项目:bootstrap 3。 我无法使 Modal 在远程模式下工作。我只是希望当我单击链接时，它会显示带有远程 url 内容的模式。 它可以工作，但模态布局被完全破坏。

这里是 jsfiddle 的链接:http://jsfiddle.net/NUCgp/5/

代码:

<a data-toggle="modal" href="http://fiddle.jshell.net/Sherbrow/bHmRB/0/show/" data-target="#myModal">Click me !</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body"><div class="te"></div></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

任何人都可以使这个简单的示例起作用吗？

Answer 1

关于模态的远程选项，来自 the docs :

If a remote URL is provided, content will be loaded via jQuery's load method and injected into the root of the modal element.

这意味着您的远程文件应该提供完整的模式结构，而不仅仅是您想要在正文上显示的内容。

Bootstrap 3.1 更新:

在 v3.1 中，上述行为已更改，现在远程内容已加载到 .modal-content

查看此 Demo fiddle

Boostrap 3.3 更新:

This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.