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 相关文章推荐
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
vue文件树组件使用详解
Mar 29 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
js实现批量删除功能
Aug 27 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启动时候提示PHP startup的解决方法
2013/05/07 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP反射实际应用示例
2019/04/03 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
python实现的希尔排序算法实例
2015/07/01 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python实现随机漫步功能
2018/07/09 Python
python实现flappy bird小游戏
2018/12/24 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
Python celery原理及运行流程解析
2020/06/13 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
物业招聘计划书
2014/01/10 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
神农溪导游词
2015/02/11 职场文书
公司承诺书格式范文
2015/04/28 职场文书
2016公司年会主持词
2015/07/01 职场文书
初三英语教学反思
2016/02/15 职场文书