- 首页
- 其他开发
- 带有远程 Modal 的 Bootstrap 3
带有远程 Modal 的 Bootstrap 3
[英] Bootstrap 3 with remote Modal
<div class="modal-body"><div class="te"></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存更改</button>
<!--/.modal-content -->
<!--/.modal-dialog -->
<!--/.modal -->
谁能让这个简单的例子工作?
解决方案
关于模态的远程选项，来自文档:
<块引用>
如果提供了远程 URL，内容将通过 jQuery 的加载加载方法并注入到模态元素的根.
这意味着您的远程文件应该提供完整的模态结构，而不仅仅是您想在正文中显示的内容.
引导程序 3.1 更新:
在 v3.1 中，上述行为已更改，现在远程内容已加载到 .modal-content
看到这个演示小提琴
Boostrap 3.3 更新:
<块引用>
此选项自 v3.3.0 起已弃用，并已在 v4 中删除.我们建议改用客户端模板或数据绑定框架，或调用 jQuery.load 自己.
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.
Here is a link to a jsfiddle : http://jsfiddle.net/NUCgp/5/
The code :
<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">×</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:
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.
Bootstrap 3.1 Update:
In v3.1 the above behavior was changed and now the remote content is loaded into .modal-content
See this Demo fiddle
Boostrap 3.3 Update:
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屋！
