bootstrap 弹出框点击其他区域时弹出框不消失选项设置
Bootstrap 设置 点击 其他 区域 选项 弹出 消失
2023-09-27 14:28:34 时间
默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可能会带来很不好的体验效果,所以,我们会希望不会发生这种情况,事实上bootstrap dialog提供了大量的选项可以设置各种dialog的行为和效果。如下所示:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">新增</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
</div>
</div>
</div>
</div>
$("#add").click(function () {
$("#myModalLabel").text("新增");
$('#myModal').modal({backdrop:"static"}); --设置为static后可以防止不小心点击其他区域是弹出框消失
});
其他更多选项可见http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
相关文章
- yii2 配合bootstrap添加一个气泡
- How can I get bootstrap version via javascript?
- Bootstrap组件之导航
- Bootstrap的表单控件
- 转 关于bootstrap--表格(table的各种样式)
- 五、bootstrap-Table Treegrid
- Bootstrap之响应式导航栏
- Bootstrap之网格类
- 6款程序员不得不爱的bootstrap模板
- 超棒的在线Bootstrap主题编辑工具 - lollytin
- bootstrap 下拉菜单不显示的解决办法
- Bootstrap 插件-轮播
- Bootstrap 控制移动端和网页端的元素隐藏和显示
- Bootstrap 警告框