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 15 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
JS delegate与live浅析
Dec 21 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
JavaScript运算符小结
Jun 03 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
如何提高数据访问速度
Dec 26 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 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
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
安全大检查实施方案
2014/02/22 职场文书
讲座主持词
2014/03/20 职场文书
党员自我剖析材料
2014/08/31 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android