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 相关文章推荐
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
js中eval详解
Mar 30 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
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
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
PHP生成树的方法
2015/07/28 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
JavaScript 调试器简介
2009/02/21 Javascript
js对象的比较
2011/02/26 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
python实现给字典添加条目的方法
2014/09/25 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
python增加图像对比度的方法
2019/07/12 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
毕业生如何写自荐信
2014/03/26 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
2014年管理工作总结
2014/11/22 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
公司新员工欢迎词
2015/09/30 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
详解python的异常捕获
2022/03/03 Python