Question

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

以下是代码示例和plunkr的链接。自定义CSS和Bootstrap 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>

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模式不会在背景单击时关闭

1 个答案: