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 相关文章推荐
JS实现时间格式化的方式汇总
Oct 16 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
python 实现dict转json并保存文件
2019/12/05 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
html5弹跳球示例代码
2013/07/23 HTML / CSS
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
签约仪式策划方案
2014/06/02 职场文书
推普周活动总结
2014/08/28 职场文书
Python基础详解之描述符
2021/04/28 Python