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 前的按键判断代码
Mar 19 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
第五节--克隆
2006/11/16 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
理解 JavaScript 预解析
2009/10/25 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Python内置模块logging用法实例分析
2018/02/12 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
python实现年会抽奖程序
2019/01/22 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
使用django自带的user做外键的方法
2020/11/30 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
飘柔洗发水广告词
2014/03/14 职场文书
党员公开承诺书
2014/03/25 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
应届生求职信范文
2014/06/30 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
受资助学生感谢信
2015/01/21 职场文书
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL