Bootstrap 模态框自定义点击和关闭事件详解
模态框避免点击背景处关闭:
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 模态框实现刷新网页并关闭功能
方法与实现 hide.bs.modal,当调用 hide 实例方法时触发. $('#identifier').on('hide.bs.modal', function () { // 执行一些动作... }) hidden.bs.modal,当模态框完全对用户隐藏时触发. $('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... }) 源码示例 $('#confirmRevokeOrder').on('hidden.bs.
-
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
需求如下: 在弹出的模态框中点击 "更换" 按钮后 实现模态框自动关闭, 做法: 给"更换"按钮加上:data-dissmiss="modal" <button type="button" class="btn btn-primary btn-sm"data-dismiss="modal" >更换</button> 总结 以上所述是小编给大家介绍的BootStra
-
Bootstrap模态框禁用空白处点击关闭
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.bootstrap的模态框在默认情况下,点击其他空白区域(通常是遮罩层),模态框会被关闭,那么以下方法就是禁止点击其他区域关闭模态框. $('#myModal').modal({backdrop: 'static', keyboard: false}); backdrop:static时,空白处不关闭. keyboard:false时,esc键盘不
-
整理关于Bootstrap模态弹出框的慕课笔记
整理自慕课笔记 插件的源文件:modal.js. 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作,也有可能弹出的是一张图片.如下图所示: <body> <button class="btn btn-primary" type="button">点击我</button> <div cl
-
Bootstrap 模态框自定义点击和关闭事件详解
模态框避免点击背景处关闭: 1.div初始化时添加属性 aria-hidden="true" data-backdrop="static" <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden='true'
-
element ui 对话框el-dialog关闭事件详解
通常会有需求,在关闭弹框后需要清空填写的数据,这时候就需要关闭事件了 <el-dialog title="标题" :visible.sync="bind" size="small" @close='closeDialog'> </el-dialog> 在标签中加入@close='closeDialog' mothods中加入 //关闭弹框的事件 closeDialog(){ this.xxx = '';//清空数据 },
-
bootstrap模态框关闭后清除模态框的数据方法
如下所示: $('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); }); 以上这篇bootstrap模态框关闭后清除模态框的数据方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
Bootstrap模态框案例解析
一.模态框的正常点击出现,如添加功能 <td width="120px"> <button type="button class="btn btn-blue" style="width: 100px;" data-toggle="modal" data-target="#systemAdd">添加</button></td> <!-- 添加的模
-
bootstrap模态框消失问题的解决方法
小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不同问题,希望对大家有帮助. 状况一:bootstrap模态框瞬间消失解决 bootstrap模态框挺好,但这方面的例子很少,都是官方的代码,网上没有一点新的东西.比如,save changes,即点击确认后如何处理?没有例子.只有取消close的功能.我的需求是这样,点击一个链接,传一个id,打开模态框,进行输入.单选.列表选择等,点模态框确认,然后连同刚才的id.模态框中的各种值,一起提交到后台处理. 第一步:用链接传id并打
-
Bootstrap模态框使用详解
本文实例为大家分享了Bootstrap模态框的两种使用状况,供大家参考,具体内容如下 一.模态框的正常点击出现,如添加功能 <td width="120px"> <button type="button class="btn btn-blue" style="width: 100px;" data-toggle="modal" data-target="#systemAdd"&g
-
bootstrap模态框示例代码分享
本文实例为大家分享了bootstrap模态框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
-
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
引入文件 <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" href="style.css" rel="external nofollow" > <script src="jquery-1.12.4.min
随机推荐
- PHP静态延迟绑定和普通静态效率的对比
- 微信公众平台开发——群发信息
- Ruby on Rails基础之新建项目
- Bootstrap整体框架之CSS12栅格系统
- javascript 动态table添加colspan\rowspan 参数的方法
- raphael.js绘制中国地图 地图绘制方法
- 使用asp.net改变网页上图片颜色比如灰色变彩色
- 备份mysql数据库的php代码(一个表一个文件)
- php中数字0和空值的区别分析
- PHP模板引擎Smarty内置变量调解器用法详解
- 详解python进行mp3格式判断
- 关于vue-router的beforeEach无限循环的问题解决
- php实现文件预览功能
- C语言实现颠倒栈的方法
- mysql 5.7.5 m15 winx64.zip安装教程
- jquery得到font-size属性值实现代码
- Python常用库推荐
- PHP文件下载实例代码浅析
- 详解C语言编程中的函数指针以及函数回调
- Node.js模拟发起http请求从异步转同步的5种用法