Angular UI Bootstrap Modal - 如何防止用户交互答案

【问题标题】：Angular UI Bootstrap Modal - how to prevent user interactionAngular UI Bootstrap Modal - 如何防止用户交互
【发布时间】：2013-12-20 16:41:06
【问题描述】：

在我当前的用例中，我正在尝试使用 angular-ui 模态窗口来显示我们在后台进程中执行的计算进度，我们在完成时禁用。

一切正常。我只想禁止用户点击背景中的任何元素。

知道我们该怎么做吗？

【问题讨论】：

标签： modal-dialog angular-ui angular-ui-bootstrap

【解决方案1】：

您可以在打开模态窗口时传递以下选项，以防止用户关闭窗口：

backdrop: 'static' - 顶部阻止用户在背景点击时关闭模式
keyboard: false - 所以用户不能按 ESC 关闭窗口

完整文档在这里：http://angular-ui.github.io/bootstrap/#/modal

【讨论】：

【解决方案2】：

我只想添加一个带有代码的示例并扩展 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');
  });

【讨论】：