web-dev-qa-db-ja.com

Angular UI Bootstrap Modal-ユーザーの操作を防ぐ方法

現在のユースケースでは、angular-uiモーダルウィンドウを使用して、完了時に無効にするバックグラウンドプロセスで実行する計算の進行状況を表示しようとしています。

すべてうまくいきます。ユーザーがバックグラウンドで要素をクリックできないようにしたいだけです。

どうすればこれを行うことができますか？

modal-dialogangular-uiangular-ui-bootstrap
21
Aditya Sethi

モーダルウィンドウを開くときに、ユーザーがウィンドウを閉じないようにするには、次のオプションを渡すことができます。

  • backdrop: 'static' --topは、ユーザーが背景クリックでモーダルを閉じるのを防ぎます
  • keyboard: false-ユーザーがESCを押してウィンドウを閉じることができないようにする

ここに完全なドキュメント： http://angular-ui.github.io/bootstrap/#/modal

35
pkozlowski.opensource

コードを使用して例を追加し、pkozlowski.opensourceの回答を拡張したいのですが、この例を確認してください。

    var modalInstance = $modal.open({
        templateUrl: '/views/registration/loginModal.html',
        controller: LoginModalInstanceCtrl,
        windowClass: 'login-modal-window',
        resolve : { 
          credentials : function(){ return {email :'', password:''}; }
        },
        backdrop: 'static', /*  this prevent user interaction with the background  */
        keyboard: false
      });

      modalInstance.result.then(function (res) {

      }, function () {
         /*  cancel */
         $state.go('home');
  });
4
Edgar Moreno