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编程起步(第二课)
Jan 10 Javascript
JavaScript中this关键字使用方法详解
Mar 08 Javascript
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
python使用多线程不断刷新网页的方法
2015/03/31 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
python使用knn实现特征向量分类
2018/12/26 Python
python 画条形图(柱状图)实例
2020/04/24 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
电大自我鉴定
2013/10/27 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
男女朋友协议书
2014/04/23 职场文书
世界文化遗产导游词
2015/02/13 职场文书