Bootstrap模态框禁用空白处点击关闭


Posted in Javascript onOctober 20, 2016

模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。bootstrap的模态框在默认情况下,点击其他空白区域(通常是遮罩层),模态框会被关闭,那么以下方法就是禁止点击其他区域关闭模态框。

$('#myModal').modal({backdrop: 'static', keyboard: false});

backdrop:static时,空白处不关闭.

keyboard:false时,esc键盘不关闭.

上述代码也用于打开模态框。 

也可以使用以下方法:

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
 <div class="modal-dialog custom-dialog succ-dialog">
 <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>提示信息</h4>
  </div>
  <div class="modal-body">
  <div><img src="images/loading.gif"><p><span>投标成功!</span><img src="images/success.png"></p></div>
  </div>  
 </div>
 </div>
</div>

这里的data-backdrop="static"指定一个静态的背景,当用户点击模态框外部时不会关闭模态框。而data-keyboard是指当按下 escape 键时关闭模态框,设置为 false 时则按键无效。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript获取GridView选择的行内容
Apr 14 Javascript
JQuery优缺点分析说明
Jun 09 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
vue登录路由验证的实现
Dec 13 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 #Javascript
JS调用某段SQL语句的方法
Oct 20 #Javascript
Angularjs 设置全局变量的方法总结
Oct 20 #Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 #Javascript
Angular表单验证实例详解
Oct 20 #Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 #Javascript
seajs学习教程之基础篇
Oct 20 #Javascript
You might like
php常用ODBC函数集(详细)
2013/06/24 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
浏览器常用高宽的jquery插件
2011/02/24 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
毕业生找工作的求职信范文
2013/12/24 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
学党史心得体会
2014/09/05 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
Windows server 2016服务器基本设置
2022/08/14 Servers