web-dev-qa-db-ja.com

Chrome update（angularjs and bootstrap-ui）の後、カーソルがモーダルの外にリリースされると、モーダルは閉じられます

時々すばやく入力のテキスト全体を（モーダル内で）選択したいとき、テキストの最後から選択を開始し、マウスを動かしますテキスト全体が選択されるまで左に移動し、次に解放します。

マウスの動きが速いため、このreleaseがモーダルの外で発生することがあります。

動きを説明する画像：

Picture describing the release

問題は、私が外にリリースするとモーダルが閉じられることです。

質問：外部にリリースするときにモーダルが閉じないようにするにはどうすればよいですか？

私はモーダルが外側のクリックで閉じられても大丈夫です。しかし、リリースイベントでは問題です。

私が使用しています：

  • angularjs 1.5.8
  • angular-bootstrap 2.5.0（aka bootstrap-ui）
  • ブートストラップ3.3.7（jsは上記では提供されているため、jsではなくcssのみ!!!）

更新：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：

the modal is closed when released outside

更新2

新しい情報があります！これは、最後のGoole Chromeの更新後に発生し始めました！以前のバージョンのChromeとモーダルは閉じません。

angularjsgoogle-chromeangular-ui-bootstrap
14
sports

Bootstrap.jsとbootstrap.min.jsの「Modal.js」を参照するコードのみを更新しました

修正バージョン：

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

bootstrap.js印刷

1
Carlos Sitolino

この問題は最近ではなく、githubですでに言及されています

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

次の解決策は、必要に応じて小さな改善を加えても非常にうまく機能します。

 $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';
      }
    }
  });
1
Greg-A

はい、これは最後のGoole Chromeアップデートバージョン74.0.3729.169の後に発生しました。これはChromeのバグであり、修正できず、 Chrome更新が完了するまで待つ必要がありますか？

またはbootstrapメンテナはこれを修正するためにコードを更新しますか？

発行URL： https://github.com/twbs/bootstrap/issues/28844

1
Akash Vishwakarma
//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;
    }     
});
1
Negaal

範囲スライダーでも同様の状況でした。モーダルの外側のスライド中にクリックを残すと、モーダルが閉じます。だから私はdata-toggle="modal"およびdata-target="#mymodal"と追加のパラメーターを含むクリックイベントを追加

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

backdrop外側をクリックしたときのモーダル終了を無効にするkeyboardこれは私のシナリオで、モーダルを閉じるためのキーボード入力を無効にします

0
ealgehdr

backdrop: 'static'を使用してみましたか。これでうまくいくと思います。それはドキュメントにあります here

0
Aayush Regmi

モーダルウィンドウの周囲にcssパディングを追加し、サイズを大きくします。外側をクリックしても機能しますが、エッジ上でドラッグしているときにマウスを離しても閉じません。

0
mrtvrt