Bootstrap 模态框自定义点击和关闭事件详解


Posted in Javascript onAugust 10, 2018

模态框避免点击背景处关闭:

1、div初始化时添加属性 aria-hidden=”true” data-backdrop=”static”

<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden='true' data-backdrop='static'>

2、在需要显示模态框,初始化时

$(‘#myModal').modal({
backdrop: ‘static', 
//点击背景空白处不被关闭; 
keyboard: false
//触发键盘esc事件时不关闭。
});

自定义模态框显示和关闭触发事件:

$(".classname").click(function () {
   $('#mymodel').modal('show');
    alert('模态框打开了');
  });

 $('#mymodel').on('hide.bs.modal', function () {
   alert('模态框关闭了');
 });

Bootstrap 模态框自定义点击和关闭事件详解

以上这篇Bootstrap 模态框自定义点击和关闭事件详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 冒号 使用说明
Jun 06 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 #Javascript
Vue全局分页组件的实现代码
Aug 10 #Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 #Javascript
JavaScript闭包原理与用法实例分析
Aug 10 #Javascript
vue 动态绑定背景图片的方法
Aug 10 #Javascript
原生JS实现$.param() 函数的方法
Aug 10 #Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 #Javascript
You might like
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
php生成静态页面的简单示例
2014/04/17 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
关于PHP开发的9条建议
2015/07/27 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
用Python读取几十万行文本数据
2018/12/24 Python
Django框架模板用法入门教程
2019/11/04 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
迷你西餐厅创业计划书范文
2013/12/31 职场文书
学习新党章思想汇报
2014/01/09 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
学校万圣节活动方案
2014/02/13 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
教师听课评语大全
2014/12/31 职场文书
岳庙导游词
2015/02/04 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS