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中OnLoad几种使用方法
Dec 15 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 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
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
显示、隐藏密码
2006/07/01 Javascript
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
js的一些常用方法小结
2011/06/29 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
JavaScript this关键字的深入详解
2021/01/14 Javascript
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
Python Requests库基本用法示例
2018/08/20 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
为什么使用接口?
2014/08/13 面试题
如何启动时不需输入用户名与密码
2014/05/09 面试题
C#面试问题
2016/07/29 面试题
党校自我鉴定范文
2013/10/02 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
python保存图片的四个常用方法
2022/02/28 Python
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技