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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
JavaScript 继承详解(四)
Jul 13 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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
根德YB400的电路分析
2021/03/02 无线电
PHP树的代码,可以嵌套任意层
2006/10/09 PHP
隐性调用php程序的方法
2009/03/09 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
分享几道你可能遇到的python面试题
2017/07/24 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
Delphi笔试题
2016/11/14 面试题
党员自我评议个人对照检查材料
2014/09/16 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
Java实现二分搜索树的示例代码
2022/03/17 Java/Android