Angularjs 安格拉斯。使用自定义样式时，UI引导模式不会在背景单击时关闭_Angularjs_Angular Ui Bootstrap

Angularjs 安格拉斯。使用自定义样式时，UI引导模式不会在背景单击时关闭

angularjs

Angularjs 安格拉斯。使用自定义样式时，UI引导模式不会在背景单击时关闭,angularjs,angular-ui-bootstrap,Angularjs,Angular Ui Bootstrap,我使用自定义样式的UI引导模式。使用默认引导样式时，单击背景元素关闭模式，但使用自定义样式时，单击背景元素不起任何作用下面是代码示例和指向的链接。自定义CSS和引导CSS在头部链接，将它们注释出来以供检查 app.js angular.module('testApp', ['ui.bootstrap']).controller('BodyCtrl', BodyCtrl); BodyCtrl.$inject = ['$uibModal']; function BodyCtrl($uibMod

我使用自定义样式的UI引导模式。使用默认引导样式时，单击背景元素关闭模式，但使用自定义样式时，单击背景元素不起任何作用

下面是代码示例和指向的链接。自定义CSS和引导CSS在头部链接，将它们注释出来以供检查

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>

AngularJS监听.modal元素的点击，而不是.modal背景。通过对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: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 480px;
  background: #ffffff;
}

.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;
}

.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;
}