在 Bootsrap3 中动态创建模式对话框
Creating a modal dialog on the fly in Bootsrap3
有什么方法可以动态创建从 DOM 节点或 AJAX 调用开始的模式对话框吗?
现在,我必须把
<!-- 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>
<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 -->
'''
我想要类似的东西
<img src='' id="x">
<script>
$('#x').modal({title:'Image',otherOption:true});
</script>
var popupTemplate =
'<div class="modal fade">' +
' <div class="modal-dialog">' +
' <div class="modal-content">' +
' <div class="modal-header">' +
' <button type="button" class="close" data-dismiss="modal">×</button>' +
' <h4 class="modal-title">I am a dialog</h4>' +
' </div>' +
' <div class="modal-body" />' +
' <div class="modal-footer">' +
' <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>' +
' <button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
$(popupTemplate).modal()
此外,BootBox也这样做了。
相关文章:
- 打开相对于鼠标位置的CSS3/HTML5模式对话框
- Bootstrap在页面加载缓慢时会立即显示隐藏的模式对话框
- jQuery UI模式对话框覆盖淡出
- 使用Plaid Link显示自定义用户名和密码模式对话框
- 弹出格式化的模式对话框,并在用户确认时转发
- NProgress带有模式对话框以防止点击
- 使用ember模式对话框的ember中的可路由模式
- 如何在 ember.js 中的模式对话框中打开路由
- 将值从模式对话框传递给父级
- 关闭模式对话框而不刷新父级
- 如何在 javascript 中检测引导模式对话框的关闭
- 将参数传递到模式对话框
- 确认删除的模式对话框
- 当我打开模式对话框时,可以看到2个滚动条
- 用于登录/注册Angular应用程序的模式/对话框
- 选中的单选按钮在jQuery模式对话框中不能正常工作
- Safari限制?使用多种方法来显示多个自定义模式对话框
- 如何将事件绑定到模式对话框上的组件
- 单击按钮打开窗口作为使用javascript的模式对话框
- 用JavaScript制作一个按钮的动画,从按钮到屏幕中心弹出一个模式对话框