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操作JSON实例代码
Feb 09 Javascript
js遍历td tr等html元素
Dec 13 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
js数组去重的方法总结
Jan 18 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 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/05/07 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
Python语言描述KNN算法与Kd树
2017/12/13 Python
python实现聊天小程序
2018/03/13 Python
python中reader的next用法
2018/07/24 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
教育实习生的自我评价分享
2013/11/21 职场文书
政府信息公开实施方案
2014/05/09 职场文书
关于运动会的口号
2014/06/07 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python