Chrome 업데이트 후 커서가 모달 밖으로 해제되면 모달이 닫힙니다(angularjs 및 bootstrap-ui).

Chrome 업데이트 후 커서가 모달 밖으로 해제되면 모달이 닫힙니다(angularjs 및 bootstrap-ui).

때로는 입력의 전체 텍스트(모달 내)를 빠르게 선택하고 싶을 때 텍스트 끝에서 선택을 시작하여 전체 텍스트가 선택된 후 해제될 때까지 마우스를 왼쪽으로 이동합니다.

마우스 움직임이 빠르기 때문에 이 릴리스가 모드 밖에서 발생하는 경우도 있습니다.

움직임을 설명하는 그림:

문제는 제가 외부에 출고할 때 모달이 닫혀있다는 것입니다.

질문: 외부로 방출할 때 모드가 닫히지 않도록 하려면 어떻게 해야 합니까?

밖에서 클릭 한 번으로 모드가 닫혀도 괜찮습니다.하지만 발매 이벤트는 괜찮지 않습니다.

사용 중:

• angularjs 1.5.8
• angular-bootstrap 2.5.0 (일명 bootstrap-ui)
• 부트스트랩 3.3.7 (오직 CSS!!!js가 아닙니다. js는 위에서 제공하기 때문입니다.)

업데이트: 플렁커와 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이 있는 다른 컴퓨터로 시도해봤는데 modal이 닫히지 않습니다.

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

원본 리포지토리가 보관되었으므로 기여를 수락하지 않습니다.

관심 있는 분들을 위해 버전을 변경하고 수정 사항을 추가했습니다.
https://github.com/peteriman/bootstrap

아래 비교:
https://github.com/angular-ui/bootstrap/compare/master ...peteriman: modal-

=  // 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

bootstrap.js와 bootstrap.min.js에서 "Modal.js"를 참조한 코드만 업데이트 했습니다.

수정된 버전:

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

bootstrap.jsprint

네, 지난 Goole Chrome 업데이트 버전 74.0.3729.169 이후에 다시 이런 일이 발생하기 시작했는데, 이것은 우리가 수정할 수 없는 Chrome의 버그이며 해결되기까지 Chrome 업데이트를 기다려야 하는 것입니까?

아니면 부트스트랩 관리자가 이 문제를 해결하기 위한 코드를 업데이트할 것입니까?

발행 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 && e.which === 1 && openedWindows.top()) {
               $modalStack.getTop().key.dismiss();
            }
          });
        }
      });
      if (val>0) {
        $modalStack.getTop().value.backdrop = 'static';
      }
    }
  });

부트스트랩 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'. 저는 그게 효과가 있을 거라고 생각합니다.여기 설명서에 나와 있습니다.

모드 창 주위에 cs 패딩을 추가하고 크기를 크게 조정합니다.바깥쪽 클릭은 여전히 작동하지만 가장자리를 드래그하는 동안 마우스를 놓으면 닫히지 않습니다.

레인지 슬라이더도 상황이 비슷했습니다.슬라이드를 하는 동안 클릭을 남기는 것을 모드 밖에서 닫습니다. 그래서 제거했습니다.data-toggle="modal"그리고.data-target="#mymodal"에 추가 했습니다를(를) 했습니다.

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

backdrop 시 하려면 다음과 같이 하십시오.keyboard은 내 으로,입니다를 입력을 하는 것입니다.

할 다른 . 나중에 문제가 생길지 모르겠지만 어쨌든 효과가 있어서 기본적으로 저는 다음과 같이 말합니다.modal-dialogr로<div> ( (나는 object)라고 modal-helper를 (를) 합니다에 .modal.modal-helpertwidth그리고.height 공간이 속(100%)을 할 수 .되지만 위에 작은 공간이 있으므로 사용할 수 있습니다.margin그리고.padding문을 닫으려고요.

<div class="modal fade" id="login-modal" tabindex="-1" aria-labelledby="loginModalLabel" style="display: none;" aria-hidden="true">
     <div id="modal-helper" style="pointer-events: auto;">
          <div class="modal-dialog">
               ...
          </div>
     </div>
</div>

JS 를를 에할 때를 좀 했습니다.modal-helper) 으로)됨(합니다'해)가됨됩니다.pointerup 후에 이벤트pointerdown에 관한 사건.modal-helper).

는 합니다 합니다.isPointerDownToModalHelper truepointerdown 이벤트modal-helper에 , pointerup다 합니다.isPointerDownToModalHelper다시false:

var login_modal_helper = document.getElementById('modal-helper')
var isPointerDownToModalHelper = false;
addEventListener('pointerdown', (event) => {
     var objectID = event['path']['0']['id'];

     if (objectID === login_modal_helper.id) { // if pointer was over modal-helper
          isPointerDownToModalHelper = true;
     }

});

addEventListener('pointerup', (event) => {

     if (isPointerDownToModalHelper === true) {
          isPointerDownToModalHelper = false;
          $('#login-modal').modal('hide'); // hide the modal
     }

});

지금은 잘 되는 것 같아요, 누군가에게 도움이 되었으면 좋겠어요 :).

언급URL : https://stackoverflow.com/questions/55732804/modal-is-closed-when-cursor-is-released-outside-the-modal-after-chrome-update-a