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 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
flash 得到自身url参数的代码
Nov 15 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 Javascript
深入详解JS函数的柯里化
Jun 09 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中的多态性[译]
2011/08/02 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
js constructor的实际作用分析
2011/11/15 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
Python语言快速上手学习方法
2018/12/14 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
详解KMP算法以及python如何实现
2020/09/18 Python
python import 上级目录的导入
2020/11/03 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
促销活动策划方案
2014/01/12 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
体育比赛口号
2014/06/09 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
法人授权委托书范本
2014/09/17 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
Linux中文件的基本属性介绍
2022/06/01 Servers
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers