twitter-bootstrap – Bootstrap 3与远程Modal

发布时间：2020-12-17 23:53:44 所属栏目：安全来源：网络整理

导读：我刚刚开始一个新的项目与新的Bootstrap版本：bootstrap 3。我不能使模态在远程模式下工作。我只是想，当我点击一个链接，它显示模态与远程URL的内容。它工作，但模态布局被完全破坏。这里是一个jsfiddle的链接：http://jsfiddle.net/NUCgp/5/ 代码： a

我刚刚开始一个新的项目与新的Bootstrap版本：bootstrap 3。
我不能使模态在远程模式下工作。我只是想，当我点击一个链接，它显示模态与远程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 -->

谁能让这个简单的例子工作？

解决方法

关于模态的远程选项，从 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 07002 yourself.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!