将功能绑定到Twitter Bootstrap Modal关闭
我在一个新项目上使用Twitter Bootstrap lib,我希望页面的一部分刷新并检索模式关闭时的最新json数据。 我看不到文档中的任何地方,有人可以向我指出或提出解决方案。
使用记录方法的两个问题
$('#my-modal').bind('hide', function () {// do something ...});
我已经在模式上附加了“隐藏”类,因此它不会在页面加载时显示,因此会加载两次
即使我删除了hide类并将元素ID设置为display:none
并添加console.log("THE MODAL CLOSED");
当我点击关闭时,上面的功能没有任何反应。
#1楼
引导程序3和4
$('#myModal').on('hidden.bs.modal', function () {// do something…
});
引导程序3: getbootstrap.com/javascript/#modals-events
引导程序4: getbootstrap.com/docs/4.1/components/modal/#events
引导程序2.3.2
$('#myModal').on('hidden', function () {// do something…
});
请参阅getbootstrap.com/2.3.2/javascript.html#modals→事件
#2楼
Bootstrap提供了可以挂接到模式的事件,例如,如果您希望在向用户隐藏模式后触发事件 ,则可以使用hidden.bs.modal事件,例如
/* hidden.bs.modal event example */$('#myModal').on('hidden.bs.modal', function () {window.alert('hidden event fired!');})
在这里查看工作提琴 ,在文档中阅读有关模态方法和事件的更多信息。
#3楼
代替“ live”,您需要使用“ on”事件,但将其分配给文档对象:
采用:
$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});
#4楼
$(document.body).on('hidden.bs.modal', function () {$('#myModal').removeData('bs.modal')
});
#5楼
从Bootstrap 3启动( 编辑:在Bootstrap 4中仍然相同),有两个实例可以触发事件,它们是:
1. 模态“隐藏”事件开始时
$('#myModal').on('hide.bs.modal', function () { console.log('Fired at start of hide event!');
});
2. 模态“隐藏”事件结束时
$('#myModal').on('hidden.bs.modal', function () {console.log('Fired when hide event has finished!');
});
参考: http : //getbootstrap.com/javascript/#js-events
#6楼
我已经看到了许多有关引导事件的答案,例如hide.bs.modal
,它会在模式关闭时触发。
这些事件有一个问题:模式中的任何弹出窗口(弹出窗口,工具提示等)都会触发该事件。
当模式关闭时,还有另一种捕获事件的方法。
$(document).on('hidden','#modal:not(.in)', function(){} );
模态打开时,Bootstrap使用in
类。 使用hidden
事件非常重要,因为在触发事件hide
时仍会定义in
的类。
由于IE8不支持Jquery :not()
选择器,因此该解决方案无法在IE8中使用。
#7楼
我在这里跳得很晚,但是对于使用React的Bootstrap模态的人,我一直在使用MutationObserver来检测模态可见性的变化并相应地调整状态-此方法可以在模态关闭时应用于运行任何功能:
//react stuff
componentDidMount: function() {var self = this;$(function() {$("#example_modal").addClass('modal');//use MutationObserver to detect visibility change//reset state if closedif (MutationObserver) {var observer = new MutationObserver(function(mutations) {//use jQuery to detect if element is visibleif (!$('#example_modal').is(':visible')) {//reset your stateself.setState({thingone: '',thingtwo: ''});}});var target = document.querySelector('#example_modal');observer.observe(target, {attributes: true});}});
}
对于那些想了解现代浏览器支持的人,CanIUse的MutationObserver覆盖率约为87%
希望能帮助到某人:)
干杯,
杰克
#8楼
我遇到了一些与
$('#myModal').on('hidden.bs.modal', function () {
// do something… })
您需要将其放置在页面底部,将其放置在顶部永远不会触发该事件。
#9楼
引导程序4:
$('#myModal').on('hidden.bs.modal', function (e) {// call your method
})
hide.bs.modal :调用hide实例方法后,立即触发此事件。
hidden.bs.modal :当向用户隐藏模态完成时将触发此事件(将等待CSS转换完成)。
#10楼
我会这样:
$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });
其余的已经由其他人编写。 我还建议阅读文档: jquery-on方法
#11楼
如果您想在每个模式关闭时触发函数,则可以使用此方法,
$(document).ready(function (){$('.modal').each(function (){$(this).on('hidden.bs.modal', function () {//fires when evey popup close. Ex. resetModal();});});
});
因此,您无需每次都指定模式ID。
#12楼
引导程序4
$('#my-modal').on('hidden.bs.modal', function () {window.alert('hidden event fired!');
});
有关工作示例,请参见此JSFiddle:
https://jsfiddle.net/6n7bg2c9/
请在此处查看文档的“模态事件”部分:
https://getbootstrap.com/docs/4.3/components/modal/#events
将功能绑定到Twitter Bootstrap Modal关闭相关推荐
- Bootstrap modal 关闭事件监听
以下是一个BootStrap modal弹框 <div class="modal fade" id="colorModal" tabindex=" ...
- 如何使用Bootstrap Modal和jQuery AJAX创建登录功能
by Yogi 由瑜伽士 Bootstrap Modal is an excellent way to create a Login form on your website. In this tut ...
- 如何更改Twitter Bootstrap模式框的默认宽度?
本文翻译自:How can I change the default width of a Twitter Bootstrap modal box? I tried the following: 我尝 ...
- bootstrap使用Modal,关闭弹框遗留遮罩层
前两天,用公司封装的框架,写了一个弹框,两个弹框操作相隔时间很短,第二个弹框出现遮罩层. // 手动清除 $(".modal-backdrop").remove(); 发现弹框关闭 ...
- 如何在悬停而不是单击时使Twitter Bootstrap菜单下拉列表
我想让我的Bootstrap菜单在悬停时自动下拉,而不必单击菜单标题. 我还想丢失菜单标题旁边的小箭头. #1楼 这将隐藏上升的 .navbar .dropdown-menu:before {disp ...
- 读bootstrap modal.js
保留下来自己看的时候的注释 ,以便将来自己学习使用 若有不正确之处,请指正,一起学习 /* ====================================================== ...
- bootstrap modal垂直居中(简单封装)
1.使用modal 弹出事件方法: 未封装前: <!DOCTYPE html> <html lang="en"> <head><meta ...
- centerandzoom 无效_在bootstrap modal 中加载百度地图的信息窗口失效解决方法
这个问题其实很傻,解决方法没有任何技术含量,只是记录下工作中发生的事. 前阵子给一个汽车集团客户做了一个经销商查询系统,其中一个功能是使用地图标注经销商店面地址,并且实现导航功能. 页面演示地址:ht ...
- 带有Spring,Hibernate,Akka,Twitter Bootstrap,Apache Tiles和jQuery的Maven Web项目Kickstarter代码库...
我很高兴将第二个项目上传到GitHub,以帮助人们尽快开始Java Web App开发. 我正在与Apache License 2.0共享此代码. 这是相同的网址: https://github.co ...
最新文章
- 打开word出现“您正试图运行的函数包含有宏或需要宏语言支持的内容。”的解决方法
- nio的优势_NIO研究所 | 最有AI的EC6故事
- tomcat1.8,tomcat-users.xml文件中如下修改才可以使用app manager登录,其中的roles有哪些枚举需要确认
- Keras【Deep Learning With Python】实现线性回归模型
- python代码案例详解-Python编程:案例详解输出函数print
- ora-12514: tns: 监听程序当前无法识别连接描述符中请求的服务 问题解决
- nrf51822蓝牙学习笔记之实例分析PPI和SHORT
- linux周期记录内存信息,linux top显示信息详解
- 吴恩达对话LeCun:神经网络跌宕四十年
- 2020年5月机器视觉工作阶段性总结
- 【转】BW的星型数据模型
- AUTOCAD——坐标引线标注
- android x86 usb检查不到,【android9.0】system/core下的usbhost模块无法输出log到logcat
- 两种求矩阵伪逆的方法
- 「游戏建模」3DMAX渲染慢的解决小技巧
- SlideLive网站:提供PPT模板在线播放和免费下载的功能
- node-opcua的使用 --- [2] 添加对象和变量
- python蜂鸣器_Micropython之蜂鸣器1
- Java知识体系脑图
- 【技术干货】PCB焊盘设计之问题详解