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 来操作字符串(一些字符串函数)
Feb 15 Javascript
理解 JavaScript 预解析
Oct 25 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
JS定义类的六种方式详解
May 12 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
vue之将echart封装为组件
Jun 02 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 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+MYSQL开发工具及资源收藏
2007/01/02 PHP
php获取某个目录大小的代码
2008/09/10 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
php面向对象重点知识分享
2019/09/27 PHP
JavaScript Eval 函数使用
2010/03/23 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
python str与repr的区别
2013/03/23 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
求职自荐信
2013/12/14 职场文书
公司薪酬管理制度
2014/01/31 职场文书
老公给老婆的保证书
2014/04/28 职场文书
老乡会致辞
2015/07/28 职场文书
比较几种Redis集群方案
2021/06/21 Redis
Java对文件的读写操作方法
2022/04/29 Java/Android