具有远程Modal的Bootstrap 3 [英] Bootstrap 3 with remote Modal

问题描述

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

I just started a new project with the new Twitter Bootstrap release : bootstrap 3. I can't make the Modal work in the remote mode. I just want that when I click on a link it shows the modal with the content of the remote url. It works but the modal layout is completely destroyed.

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

Here is a link to a 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 -->

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

Can anyone make this simple example work ?

推荐答案

关于模态的远程选项，来自文档:

Regarding the remote option for modals, from the docs:

如果提供了远程URL，则将通过jQuery的加载来加载内容 方法，并将其注入模态元素的根.

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

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

That means your remote file should provide the complete modal structure, not just what you want to display on the body.

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

In v3.1 the above behavior was changed and now the remote content is loaded into .modal-content

查看此 演示小提琴

See this Demo fiddle

此选项自v3.3.0起已弃用，并已在v4中删除.我们建议您改用客户端模板或数据绑定框架，或调用jQuery.load 自己.

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.

这篇关于具有远程Modal的Bootstrap 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！