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代码(续)
Feb 25 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
Vue组件为什么data必须是一个函数
Jun 11 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 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开发模式(简写版)
2007/03/15 PHP
php扩展ZF――Validate扩展
2008/01/10 PHP
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
PHP中PDO的错误处理
2011/09/04 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
PDO::getAttribute讲解
2019/01/28 PHP
javascript 图片裁剪技巧解读
2012/11/15 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
javascript折半查找详解
2015/01/26 Javascript
JS解析XML实例分析
2015/01/30 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
Python中生成器和yield语句的用法详解
2015/04/17 Python
深入理解Python中的内置常量
2017/05/20 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
python画图的函数用法以及技巧
2019/06/28 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
三好学生自我鉴定
2013/12/17 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
幼儿教师个人总结
2015/02/05 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android