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 Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
Vue单文件组件开发实现过程详解
Jul 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
js下函数般调用正则的方法附代码
2008/06/22 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
再谈javascript原型继承
2014/11/10 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
关于Python如何避免循环导入问题详解
2017/09/14 Python
python Pygame的具体使用讲解
2017/11/03 Python
python如何重载模块实例解析
2018/01/25 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
2014年保管员工作总结
2014/11/18 职场文书
2014年学生工作总结
2014/11/20 职场文书
交通安全主题班会
2015/08/12 职场文书
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python