将功能绑定到Twitter Bootstrap Modal Close

11 回答

• 6

  Bootstrap 4

  $('#my-modal').on('hidden.bs.modal', function () {
    window.alert('hidden event fired!');
  });
  

  有关工作示例，请参阅此JSFiddle：

  http://jsfiddle.net/aq9Laaew/120440/

  请参阅此处文档的模态事件部分：

  https://getbootstrap.com/docs/4.1/components/modal/#events

  回复于 2024-04-29T23:26:13+08:00
• 1

  Bootstrap 3＆4

  $('#myModal').on('hidden.bs.modal', function () {
      // do something…
  })
  

  Bootstrap 3：getbootstrap.com/javascript/#modals-events

  Bootstrap 4：getbootstrap.com/docs/4.1/components/modal/#events

  Bootstrap 2.3.2

  $('#myModal').on('hidden', function () {
      // do something…
  })
  

  见getbootstrap.com/2.3.2/javascript.html#modals→事件

  回复于 2024-04-29T23:26:13+08:00
• 1

  从 Bootstrap 3 开始（ edit: 在 Bootstrap 4 中仍然相同）有2个实例，您可以在其中启动事件，其中：

  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

  回复于 2024-04-29T23:26:13+08:00
• 13

  您需要使用“on”事件，而不是“live”，而是将其分配给文档对象：

  使用：

  $(document).on('hidden.bs.modal', '#Control_id', function (event) {
  // code to run on closing
  });
  

  回复于 2024-04-29T23:26:13+08:00
• 2

  $(document.body).on('hidden.bs.modal', function () {
      $('#myModal').removeData('bs.modal')
  });
  

  回复于 2024-04-29T23:26:13+08:00
• 13

  Bootstrap提供你可以挂钩到modal的事件，就像你想在模式完成对用户隐藏的情况下触发event你可以使用 hidden.bs.modal 这样的事件

  /* hidden.bs.modal event example */
      $('#myModal').on('hidden.bs.modal', function () {
            window.alert('hidden event fired!');
      })
  

  检查fiddle here在 Documentation 中阅读有关模态方法和事件的更多信息

  回复于 2024-04-29T23:26:13+08:00
• 41

  我已经看到许多关于引导事件的答案，例如 hide.bs.modal ，当模态关闭时触发 .

  这些事件存在问题：模态中的任何弹出窗口（弹出窗口，工具提示等）都会触发该事件 .

  当模态关闭时，还有另一种方法可以捕获事件 .

  $(document).on('hidden','#modal:not(.in)', function(){} );
  

  当模态打开时，Bootstrap使用 in 类 . 使用 hidden 事件非常重要，因为在触发事件 hide 时仍会定义类 in .

  此解决方案在IE8中不起作用，因为IE8不支持Jquery :not() 选择器 .

  回复于 2024-04-29T23:26:13+08:00
• 1

  我'm jumping in super late here, but for people using Bootstrap modals with React I'已经使用MutationObserver来检测模态可见性的变化并相应地调整状态 - 这个方法可以应用于在模态关闭时运行任何函数：

  //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
            });
          }
      });
  }
  

  对于那些对现代浏览器支持感到疑惑的人，CanIUse在around 87%上有MutationObserver的报道

  希望有人帮助:)

  干杯，

  可靠的人

  回复于 2024-04-29T23:26:13+08:00
• 0

  我和其他人有同样的问题

  $('#myModal').on('hidden.bs.modal', function () {
  // do something… })
  

  您需要将其放在页面底部，将其放在顶部永远不会触发事件 .

  回复于 2024-04-29T23:26:13+08:00
• 943

  Bootstrap 4：

  $('#myModal').on('hidden.bs.modal', function (e) {
     // call your method
  })
  

  hide.bs.modal ：调用hide实例方法后立即触发此事件 .

  hidden.bs.modal ：当模态完成对用户的隐藏时将触发此事件（将等待CSS转换完成） .

  回复于 2024-04-29T23:26:13+08:00
• 106

  我会这样做：

  $('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });
  

  其余的已经是其他人写的 . 我还建议阅读文档：jquery - on method

  回复于 2024-04-29T23:26:13+08:00