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 相关文章推荐
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
VFP与其他应用程序的集成
2006/10/09 PHP
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
js中function()使用方法
2013/12/24 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
Python对wav文件的重采样实例
2020/02/25 Python
python实现人机五子棋
2020/03/25 Python
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
区域销售经理职责
2013/12/22 职场文书
周鸿祎:教你写创业计划书
2013/12/30 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
优质服务口号
2014/06/11 职场文书
球队口号
2014/06/18 职场文书
2014年采购员工作总结
2014/11/18 职场文书
学会感恩主题班会
2015/08/12 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL