将功能绑定到Twitter Bootstrap Modal Close

作者: 枫
发布时间: 2024-07-27 12:20:15 (5天前)
转自：

10 条回复

0#
回复此人
句号了哦哦 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我已经看到很多关于引导事件的答案，例如 <code> hide.bs.modal </code> 当模态关闭时触发。 </p> <P> 这些事件存在问题：模态中的任何弹出窗口（弹出窗口，工具提示等）都会触发该事件。 </p> <P> 当模态关闭时，还有另一种方法可以捕获事件。 </p> <pre> <code> $(document).on('hidden','#modal:not(.in)', function(){} ); </code> </pre> <P> Bootstrap使用 <code> in </code> 模态打开时的类。使用它是非常重要的 <code> hidden </code> 自上课以来的活动 <code> in </code> 仍然在事件发生时定义 <code> hide </code> 被触发了。 </p> <P> 此解决方案在IE8中不起作用，因为IE8不支持Jquery <code> :not() </code> 选择。 </p> </DIV>

编辑
1#
回复此人
My☀ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我和其他人有同样的问题 </p> <pre> <code> $('#myModal').on('hidden.bs.modal', function () { // do something鈥� }) </code> </pre> <P> 您需要将其放在页面底部，将其放在顶部永远不会触发事件。 </p> </DIV>

编辑
2#
回复此人
誓言你好 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我在这里超级跳得很晚，但对于使用Bootstrap模态和React的人我一直在使用 <a href="https://developer.mozilla.org/en/docs/Web/API/MutationObserver" rel="nofollow"> MutationObserver </A> 检测模态可见性的变化并相应地调整状态 - 此方法可用于在模态关闭时运行任何函数： </p> <pre> <code> //react stuff componentDidMount: function() { var self = this; $(function() { $("#example_modal").addClass('modal'); //use MutationObserver to detect visibility change //reset state if closed if (MutationObserver) { var observer = new MutationObserver(function(mutations) { //use jQuery to detect if element is visible if (!$('#example_modal').is(':visible')) { //reset your state self.setState({ thingone: '', thingtwo: '' }); } }); var target = document.querySelector('#example_modal'); observer.observe(target, { attributes: true }); } }); } </code> </pre> <P> 对于那些对现代浏览器支持感到疑惑的人，CanIUse有MutationObserver的报道 <a href="http://caniuse.com/#search=mutationobserver" rel="nofollow"> 约87％ </A> </p> <P> 希望有人帮助:) </p> <P> 干杯， </p> <P> 可靠的人 </p> </DIV>

编辑
3#
回复此人
仙风道骨刘憨 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我会这样做： </p> <pre> <code> $('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method }); </code> </pre> <P> 其余的已经是其他人写的。我还建议阅读文档： <a href="http://api.jquery.com/on/" rel="nofollow noreferrer"> jquery - 关于方法 </A> </p> </DIV>

编辑
4#
回复此人
無口君哦哦 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H2> Bootstrap 3＆amp; 4 </H2> <pre> <code> $('#myModal').on('hidden.bs.modal', function () { // do something鈥n}) </code> </pre> <P> Bootstrap 3： <a href="https://getbootstrap.com/javascript/#modals-events" rel="noreferrer"> getbootstrap.com/javascript/#modals-events </A> </p> <P> Bootstrap 4： <a href="https://getbootstrap.com/docs/4.1/components/modal/#events" rel="noreferrer"> getbootstrap.com/docs/4.1/components/modal/#events </A> </p> <H2> Bootstrap 2.3.2 </H2> <pre> <code> $('#myModal').on('hidden', function () { // do something鈥n}) </code> </pre> <P> 看到 <a href="https://getbootstrap.com/2.3.2/javascript.html#modals" rel="noreferrer"> getbootstrap.com/2.3.2/javascript.html#modals </A> 鈫鈫活动 </p> </DIV>

编辑
5#
回复此人
凯撒 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Bootstrap 4： </p> <pre> <code> $('#myModal').on('hidden.bs.modal', function (e) { // call your method }) </code> </pre> <P> 的<strong> hide.bs.modal </强> ：调用hide实例方法时会立即触发此事件。 </p> <P> 的<strong> hidden.bs.modal </强> ：当模态完成对用户的隐藏时将触发此事件（将等待CSS转换完成）。 </p> </DIV>

编辑
6#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 开始的<strong> Bootstrap 3 </强> （的<strong> 编辑： </强> 还是一样的的<strong> Bootstrap 4 </强> ）有2个实例可以启动事件，是： </p> <H2> 1。的<strong> 当模态“隐藏”事件开始时 </强> </H2> <pre> <code> $('#myModal').on('hide.bs.modal', function () { console.log('Fired at start of hide event!'); }); </code> </pre> <H2> 2。的<strong> 当模态“隐藏”事件结束时 </强> </H2> <pre> <code> $('#myModal').on('hidden.bs.modal', function () { console.log('Fired when hide event has finished!'); }); </code> </pre> <P> 参考： <a href="http://getbootstrap.com/javascript/#js-events" rel="noreferrer"> http://getbootstrap.com/javascript/#js-events </A> </p> </DIV>

编辑
7#
回复此人
只怕再见是故人 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您需要使用“on”事件，而不是“live”，而是将其分配给文档对象： </p> <P> 使用： </p> <pre> <code> $(document).on('hidden.bs.modal', '#Control_id', function (event) { // code to run on closing }); </code> </pre> </DIV>

编辑
8#
回复此人
࿏自ོ༾由ོ༽人͙⃡⌇ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> $(document.body).on('hidden.bs.modal', function () { $('#myModal').removeData('bs.modal') }); </code> </pre> </DIV>

编辑

登录后才能参与评论