Bootstrap- Modal对话框如何在关闭时触发事件

最新推荐文章于 2022-01-05 19:41:04 发布
最新推荐文章于 2022-01-05 19:41:04 发布
阅读量1.7k 收藏
点赞数
分类专栏： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zj52hm/article/details/52332221
版权
下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。
事件 描述 实例
show.bs.modal 在调用 show 方法后触发。 
$('#identifier').on('show.bs.modal', function () { // 执行一些动作... })
shown.bs.modal 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。 
$('#identifier').on('shown.bs.modal', function () { // 执行一些动作... })
hide.bs.modal 当调用 hide 实例方法时触发。 
$('#identifier').on('hide.bs.modal', function () { // 执行一些动作... })
hidden.bs.modal 当模态框完全对用户隐藏时触发。 
$('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... })

实例

下面的实例演示了事件的用法：


2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
< html >
< head >
    < title >Bootstrap 实例 - 模态框（Modal）插件事件</ title >
    < link  href = "/bootstrap/css/bootstrap.min.css"  rel = "stylesheet" >
    < script  src = "/scripts/jquery.min.js" ></ script >
    < script  src = "/bootstrap/js/bootstrap.min.js" ></ script >
</ head >
< body >
 
< h2 >模态框（Modal）插件事件</ h2 >
 
<!-- 按钮触发模态框 -->
< button  class = "btn btn-primary btn-lg"  data-toggle = "modal"  data-target = "#myModal" >
    开始演示模态框
</ button >
 
<!-- 模态框（Modal） -->
< div  class = "modal fade"  id = "myModal"  tabindex = "-1"  role = "dialog" 
    aria-labelledby = "myModalLabel"  aria-hidden = "true" >
    < div  class = "modal-dialog" >
       < div  class = "modal-content" >
          < div  class = "modal-header" >
             < button  type = "button"  class = "close"  data-dismiss = "modal" 
                aria-hidden = "true" >×
             </ button >
             < h4  class = "modal-title"  id = "myModalLabel" >
                模态框（Modal）标题
             </ h4 >
          </ div >
          < div  class = "modal-body" >
             点击关闭按钮检查事件功能。
          </ div >
          < div  class = "modal-footer" >
             < button  type = "button"  class = "btn btn-default" 
                data-dismiss = "modal" >
                关闭
             </ button >
             < button  type = "button"  class = "btn btn-primary" >
                提交更改
             </ button >
          </ div >
       </ div > <!-- /.modal-content -->
    </ div > <!-- /.modal-dialog -->
</ div > <!-- /.modal -->
< script >
    $(function () { $('#myModal').modal('hide')})});
</ script >
< script >
    $(function () { $('#myModal').on('hide.bs.modal', function () {
       alert('嘿，我听说您喜欢模态框...');})
    });
</ script >
 
</ body >
</ html >

小猪跑得快-Fly
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap Modal对话框如何在关闭时触发事件
09-01
主要为大家详细介绍了Bootstrap Modal对话框如何在关闭时触发事件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
python测试开发django-187.Bootstrap模态框(modal)如何在关闭时触发事件
qq_27371025的博客
02-25 2418
前言 Bootstrap 模态框 (modal) 在关闭时，如何触发一些事件?比如重置表单，或者重置表单的校验。 Bootstrap 模态框 (modal) 提供了4个显示和隐藏模态框的事件。这些事件可在函数中当钩子使用。 modal 事件 下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。 事件 描述 实例 show.bs.modal 在调用 show 方法后触发。 $(’#identifier’).on(‘show.bs.modal’, function () {// 执行一些
Java中modal dialog,showModalDialog模态对话框的使用详解以及浏览器兼容
weixin_29239661的博客
03-14 671
1.ModalDialog是什么？showModalDialog是jswindow对象的一个方法，和window.open一样都是打开一个新的页面。区别是：showModalDialog打开子窗口后，父窗口就不能获取焦点了(也就是无法操作了)。可以在子窗口中通过设置window.returnValue的值，让父窗口可以获取这个returnvalue.2.一个例子1)主窗口main.html,2)在...
bootstrap的modal 无法关闭（event事件未绑定上）
weixin_45506583的博客
11-20 1577
bootstrap的modal 无法关闭（event事件未绑定上）
Bootstrap 3 关闭Modal窗口 Close Bootstrap Modal
Just Code
12-22 3169
&lt;!-- Button trigger modal --&gt; &lt;button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&gt; Launch demo modal &lt;/button&gt; &lt;!-- Modal --&gt; &amp
ng2-bootstrap-modal：用于简化引导模式对话框的库
01-31
＃＃安装npm install ng2-bootstrap-modal观看###没有引导程序吗？ 是的，您可以创建自己CSS。 只需为.modal和.modal-dialog类编写CSS。 . modal { position : fixed; top : 0 ; right : 0 ; bottom : 0 ; left : 0...
vue-bootstrap-modal：可重用的bootstrap-modal Vue组件，用于简单模式
02-09
Vue Bootstrap Modal是一个可重用的组件，您可以在需要显示简单的模式弹出窗口时在整个项目中使用。 因此，您不必每次都想使用引导程序模式时重复相同的html代码。 目录 开始吧 安装 npm install --save @...
bootstrap-modal-rails:Rails gemified bootstrap-modal 扩展
07-09
Bootstrap::Modal::Rails 为默认类提供的 Rails Asset Gem安装将这些行添加到应用程序的Gemfile ： ### Rails 3 or previousgroup :assets do gem 'bootstrap-modal-rails'end### Rails 4gem 'bootstrap-modal-rails...
关闭Bootstrap模态
asdfgh0077的博客
05-18 368
I have a bootstrap modal dialog box that I want to show initially, then when the user clicks on the
若依中的一些常规用法
Epic_bl的博客
03-10 2350
关闭当前弹窗页面 $.modal.close(); 父页面刷新 parent.location.reload(); 关闭打开的子页签 $.modal.closeTab() 机构的树状展示： KaTeX parse error: Expected '}', got 'EOF' at end of input: …a = JSON.parse((’.jiGou’).val()); var url = ctx + “outerManage/comInfo/getComInfoTreeData”; var opti
Bootstrap modal 关闭事件监听
qq_34579060的博客
04-02 9162
以下是一个BootStrap modal弹框 <div class="modal fade" id="colorModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> <div class="modal-dialog" style="wi...
BootStrap中Modal（模态框）的使用
qq_44963130的博客
12-01 804
BootStrap中Modal（模态框）的使用： 1、静态打开：通过data属性打开隐藏模态框 设置按钮button的data-toggle:“modal”（以模态框的形式打开），data-target:"#myModal"（设置为modal的id） 2、动态打开：以jquery代码为例 $("#myModal").modal({ remote:“test/test.jsp”;//可以填写一个url，会调用jquery load方法加载数据 backdrop:“static”;//指定一个静态背景，当用户点
jQuery 模态框的开启关闭事件
冰淇淋真好吃
10-29 1万+
以下是Bootstrap 模态框 //模态框的触发事件 &amp;amp;amp;lt;p&amp;amp;amp;gt;&amp;amp;amp;lt;a data-toggle=&amp;amp;quot;modal&amp;amp;quot; href=&amp;amp;quot;#example&amp;amp;quot; class=&amp;amp;quot;btn btn-primary btn-large&amp;amp
Bootstrap基础-模态弹出框
小白的博客
08-05 1176
1. Bootstrap基础-模态弹出框 Bootstrap框架中的模态弹出框，分别运用了"modal"、“modal-dialog” 和 “modal-content” 样式，而弹出窗真正的内容都防止在"modal-content" 中，其主要又包括三个部分： 弹出框头部，modal-header，包括标题和关闭按钮； 弹出框主体，modal-body，弹出框的主要内容； 弹出框脚步，moda...
bootstrap多层modal弹窗同时关闭的解决办法
Danger Changer 的博客
04-01 8062
bootstrap多层modal弹窗时。当子窗口关闭时，所有父窗口一起关闭。 原因是bootstrap在窗口关闭事件委托时，委托给所有窗口。 如源码： 改进为 这样在多层窗口关闭时只会关闭自窗口，不再关闭父窗口
JavaScript的modal、dialog调用
jiawen2012的博客
04-15 1812
input和select元素设置为空值的方法 设置元素不可见，使用.attr("style","display:none");或者是.hide();显示相反，可以用.show(),或者是.toggle()
bootstrap modal框的事件监控（modal框打开和关闭触发事件）
热门推荐
sayoko06的博客
11-22 2万+
事件： 1、show.bs.modal，当 show 实例方法被调用之后，此事件被立即触发。 //id选择器选中modal框 $('#modal').on('show.bs.modal', function () { // 执行一些动作... }) 2、shown.bs.modal，当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。 $('#modal').on('show...
vue 子组件封装 开启关闭模态框
好好学习，天天向上！
01-05 1363
总结思路 导入子组件并且注册使用 在父组件的子组件标签上v-show或者v-if 定义一个变量show 控制盒子的显示与隐藏。 通过按钮的点击事件给show赋值为true，显示盒子。 这里利用了子传父的方法，子组件中定义一个事件，在事件中子传父一个事件和参数，在父组件的子组件标签上绑定上子组件传过来的自定义事件，事件中赋值给show 关闭模态框。 话不多说直接上代码 封装子组件 子组件代码如下 <template> <div class="box"> &lt.
sudo keystone-manage bootstrap --bootstrap-password cqu2022\ --bootstrap-admin-url http://localhost:5000/v3/ \ --bootstrap-internal-url http://localhost:5000/v3/ \ --bootstrap-public-url http://localhost:5000/v3/ \ --bootstrap-region-id RegionOne
最新发布
06-12
这个命令的作用是在Keystone中创建初始用户、服务和端点，以及设置管理员和服务用户的凭据。在运行此命令之前，您需要确保已经安装了Keystone，并且具有管理员权限。 该命令需要指定以下参数： - `--bootstrap-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小猪跑得快-Fly

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值