Chrome更新后在模态外部释放光标时，模态关闭（angularjs和bootstrap-ui）

Question

有时候我想快速选择输入的整个文本（在模态内）时，我开始从文本的末尾开始选择，然后将鼠标左移直到整个文本被选择然后我释放。

有时版本会出现在模态之外，因为鼠标移动很快。

描述运动的图片：

问题在于当我在外面释放时，模态是关闭的。

问题：如何在外面释放时防止模式关闭？

我可以通过在外部单击关闭模态。但是对于发布事件并不满意。

我正在使用：

• angularjs 1.5.8
• angular-bootstrap 2.5.0（ aka bootstrap-ui ）
• bootstrap 3.3.7（仅CSS而不是js，因为上面提供了js）

更新： 我创建了一个plunkr和一个GIF： https://plnkr.co/edit/mxDLAdnrQ4p0KKyw?p=info

<div class="modal-body">
  <div class="form-group">
    <label for="">Foo</label>
    <input type="text" class="form-control input-sm" ng-model="foo">

    <p>Do this: select the text from right to left and release the mouse outside the modal.</p>
  </div>
</div>

GIF：

更新2

我有新信息！ 在上次Goole Chrome更新之后开始发生这种情况！。我尝试使用另一台装有旧版Chrome且模式关闭的计算机。

Answer 1

original repository 已存档，不接受任何贡献。

我分叉了一个版本并为感兴趣的人添加了我的修复程序：
https://github.com/peteriman/bootstrap

对比如下：
https://github.com/angular-ui/bootstrap/compare/master...peteriman:modal-patch

=  // moved from template to fix issue #2280
-  element.on('click', scope.close);
+  var ignoreClick = false;
+  element.on('mousedown', function(evt1) {
+    element.one('mouseup', function(evt2) {
+      if (evt1.target !== evt2.target)
+        ignoreClick = true;
+    });
+  });
+  element.on('click', function(){
+    if (ignoreClick) ignoreClick = false;
+    else scope.close.apply(this, arguments);
+  });

由于 mousedown 和 mouseup 事件在 click 事件之前触发，代码检查 mousedown 和 mouseup 是否在同一个元素上。如果在不同的元素上，它会将 ignoreClick=true 的 click 事件设置为不触发。

为以编程方式调用 click 的现有代码的 element.click() 事件保持向后兼容性。

原问题：
https://plnkr.co/edit/mxDLAdnrQ4p0KKyw?p=info&preview

我的解决方案：(plkr, modal.js, line 103-114)
https://plnkr.co/edit/V42G9NcTUnH9n9M4?p=info&preview

Answer 2

我只更新了bootstrap.js和bootstrap.min.js中引用“ Modal.js”的代码

更正的版本：

 * Bootstrap: modal.js v3.4.1
 * https://getbootstrap.com/docs/3.4/javascript/#modals

bootstrap.js print

Answer 3

这个问题不是最近才出现在github

https://github.com/angular-ui/bootstrap/issues/5810

以下解决方案非常有效，并在必要时进行了少量改进。

 $rootScope.$watch(() => document.querySelectorAll('.modal').length, val => { 
  //everytime the number of modals changes
 for (let modal of document.querySelectorAll('.modal')) {
    if ($uibModalStack.getTop().value.backdrop !== 'static') { // Testing if the 
    modal is supposed to be static before attaching the event
      modal.addEventListener('mousedown', e => {
        if (e.which === 1) {
          $uibModalStack.getTop().key.dismiss()
      }
    })
       modal.querySelector('.modal-content').addEventListener('mousedown', e => {
        e.stopPropagation()
    })
   }
  }
  if (val > 0) {
   $uibModalStack.getTop().value.backdrop = 'static'
  }
})

基于相同原理的另一种解决方案，可保留模式的可拖动页脚和页眉

  $rootScope.$watch(function () {
    return $document.find('.modal').length;
     }, function (val) {
    if(openedWindows.top() ) {
      var  modal = $document.find('.modal');
      angular.forEach(modal, function(value) {
        if ($modalStack.getTop().value.backdrop !== 'static') {
          value.addEventListener('mousedown', function (e) {
            if (value === e.target && e.which === 1 && openedWindows.top()) {
               $modalStack.getTop().key.dismiss();
            }
          });
        }
      });
      if (val>0) {
        $modalStack.getTop().value.backdrop = 'static';
      }
    }
  });

Answer 4

我正在使用Bootstrap v3.0.0并遇到相同的问题。最后，我不得不将click事件更改为mousedown事件。

在我的bootstrap.js文件中的modal.js部分下，我将this.$element.on('click.dismiss.modal', $.proxy(function (e)更改为this.$element.on('mousedown.dismiss.modal', $.proxy(function (e)。一切似乎都正常。您可能还需要在bootstrap.min.js文件中进行更改。

请注意，这将立即在背景下的鼠标上关闭模态，因此，如果出于某种原因，您希望用户能够在背景上单击，然后拖动鼠标并在模式上释放，则将不起作用。

Answer 5

您是否尝试过使用backdrop: 'static'。我认为应该可以解决问题。它存在于文档here

中

Answer 6

在模态窗口周围添加css填充，并将其调整为更大的尺寸。外部单击仍然有效，但是在边缘上拖动鼠标并不能将其关闭。

Answer 7

是的，在Goole Chrome的最新更新版本74.0.3729.169之后，这种情况又再次发生了，这是Chrome无法修复的错误，我们只需要等待Chrome更新才能解决？

或引导程序维护者将更新代码以解决此问题？

问题网址：https://github.com/twbs/bootstrap/issues/28844

Answer 8

//prevent modal close when click starts in modal and ends on backdrop


$(document).on('mousedown', '.modal', function(e){      
    window.clickStartedInModal = $(e.target).is('.modal-dialog *');     
});

$(document).on('mouseup', '.modal', function(e){
    if(!$(e.target).is('.modal-dialog *') && window.clickStartedInModal) {
        window.preventModalClose = true;
    }           
});

$("#modal").on("hide.bs.modal", function (e) {
    if(window.preventModalClose){
        window.preventModalClose = false;
        return false;
    }     
}); 

Answer 9

使用范围滑块时，我遇到了类似的情况。在模态之外的幻灯片中留下点击将其关闭。因此我删除了data-toggle="modal"和data-target="#mymodal"并添加了带有额外参数的click事件

jQuery('button#modal_toggler').click(function(){
  jQuery('#myModal').modal({
          backdrop: 'static',
          keyboard: false
  })
})

backdrop以在外部单击时禁用模式关闭 keyboard这是我的情况，禁用键盘输入以关闭模式