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 键盘keyCode键码值表
Dec 24 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 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/12/06 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
python通过shutil实现快速文件复制的方法
2015/03/14 Python
python直接访问私有属性的简单方法
2016/07/25 Python
python中字符串的操作方法大全
2018/06/03 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python将数组n等分的实例
2019/12/02 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
python中xlutils库用法浅析
2020/12/29 Python
Django 实现图片上传和下载功能
2020/12/31 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
幼儿如何来做好自我评价
2013/11/05 职场文书
户外拓展活动方案
2014/02/11 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
Django实现聊天机器人
2021/05/31 Python
OpenCV实现反阈值二值化
2021/11/17 Java/Android