Блог

Иногда, когда я хочу быстро выделить весь текст ввода (внутри модального), я начинаю выделение с конца текста и перемещаю мышь влево, пока не будет выделен весь текст, а затем отпускаю.

Иногда это освобождение происходит за пределами модального, потому что движение мыши происходит быстро.

Изображение, описывающее движение:

Проблема в том, что модальный закрывается, когда я выпускаю снаружи.

Вопрос: как я могу предотвратить закрытие модального при выпуске снаружи?

Я согласен с тем, что модальный закрывается щелчком снаружи. Но не в порядке с событием выпуска.

Я использую:

• angularjs 1.5.8
• angular-bootstrap 2.5.0 (он же 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, и модальный не закрывается.

 //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 *') amp;amp; window.clickStartedInModal) {
        window.preventModalClose = true;
    }           
});

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

Исходный репозиторий был заархивирован, и никакие материалы не принимаются.

Я раздвоил версию и добавил свои исправления для тех, кто заинтересован:
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=infoamp;preview

Решение мной: (plkr, modal.js , строка 103-114)
https://plnkr.co/edit/V42G9NcTUnH9n9M4?p=infoamp;preview

Я обновил только код, ссылающийся на «Modal.js » в bootstrap.js и bootstrap.min.js

Исправленная версия:

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

bootstrap.js печать

Да, это снова начало происходить после последнего обновления Goole Chrome версии 74.0.3729.169, это ошибка в Chrome, которую мы не можем исправить, и нам просто нужно дождаться обновления Chrome, чтобы она была устранена?

или сопровождающий bootstrap обновит код для исправления этого?

URL-адрес проблемы: https://github.com/twbs/bootstrap/issues/28844

Эта проблема не является недавней, уже упоминается на 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 amp;amp; e.which === 1 amp;amp; openedWindows.top()) {
               $modalStack.getTop().key.dismiss();
            }
          });
        }
      });
      if (val>0) {
        $modalStack.getTop().value.backdrop = 'static';
      }
    }
  });
 

Я использую Bootstrap v3.0.0 и столкнулся с той же проблемой. В конце концов, мне пришлось изменить событие щелчка мыши на событие наведения курсора мыши.

В моем 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 досье.

Обратите внимание, это немедленно закроет модальный при наведении курсора мыши на фон, поэтому, если по какой-то причине вы хотите, чтобы пользователь мог щелкнуть по фону, затем перетащить мышь и отпустить модальный, это не сработает.

Вы пробовали использовать backdrop: 'static' . Я думаю, это должно сработать. Он присутствует в документации здесь

Добавьте css-отступы вокруг модального окна и увеличьте его размер. Щелчок снаружи все еще работает, но отпускание мыши при перетаскивании через край не закроет его.

У меня была аналогичная ситуация с ползунком диапазона. если оставить щелчок во время слайда за пределами модального, он закрывается. поэтому я удалил data-toggle="modal" и data-target="#mymodal" и добавил событие щелчка с дополнительными параметрами

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

backdrop чтобы отключить модальное закрытие при нажатии снаружи
keyboard это для моего сценария, чтобы отключить ввод с клавиатуры для закрытия модального