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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
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
PHP中的超全局变量
2006/10/09 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
jQuery的deferred对象使用详解
2011/08/20 Javascript
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
详解vue-router传参的两种方式
2018/09/10 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
python正则表达式的使用
2017/06/12 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
python中pika模块问题的深入探究
2018/10/13 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
Python threading的使用方法解析
2019/08/28 Python
用python批量下载apk
2020/12/29 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
社区国庆节活动方案
2014/02/05 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
小学科学教学计划
2015/01/21 职场文书
学生通报表扬范文
2015/05/04 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技