AngularJS。 UI Bootstrap 使用自定义样式时，模式不会在点击背景时关闭

Question

我正在使用带有自定义样式的 UI Bootstrap 模式。使用默认 Bootstrap 样式时，单击背景元素会关闭模态框，但使用自定义样式时，单击背景元素不会执行任何操作。

下面是代码示例和 link 到 plunkr。自定义 CSS 和 Bootstrap CSS 在头部 linked 将它们注释掉以进行检查。

app.js

angular.module('testApp', ['ui.bootstrap']).controller('BodyCtrl', BodyCtrl);

BodyCtrl.$inject = ['$uibModal'];

function BodyCtrl($uibModal) {
  var vm = this;

  vm.openModal = openModal;

  function openModal() {
    var modal = $uibModal.open({
      templateUrl: 'modal.html',
      controller: function() {

      },
      controllerAs: 'modal'
    })
  }
}

index.html

<!DOCTYPE html>
<html ng-app="testApp">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- <link rel="stylesheet" href="main.css"> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.4.0/ui-bootstrap-tpls.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="BodyCtrl as body">
  <button type="button" ng-click="body.openModal()">Open modal</button>
</body>
</html>

modal.html

<h1>Modal</h1>

main.css

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
}
.modal {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 480px;
  background: #ffffff;
}

Answer 1

AngularJS 监听对 .modal 元素的点击，而不是对 .modal-backdrop 的点击。通过对 main.css 进行以下更改，它确实有效。

main.css

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
}

.modal-dialog {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 480px;
  background: #ffffff;
}

AngularJS。 UI Bootstrap 使用自定义样式时，模式不会在点击背景时关闭

AngularJS. UI Bootstrap modal does not close on backdrop click when using custom styles

angularjs

angular-ui-bootstrap