无法通过背景幕点击关闭自定义UI引导模式

Question

我想使用CSS自定义模式对话框。 我希望宽度设置为100％，模态固定在底部，动画从底部发出。

效果很好，只是我无法单击背景来关闭模态。 如果删除了padding和margin CSS更改，则仅当我单击模态本身附近的背景时，才能关闭模态。 这让我想知道，背景音乐点击是否仅在模态的特定范围内捕获？

HTML：

<body ng-app="TestApp">
    <div ng-controller="MainController">
        <button ng-click="testModal()">Test Modal</button>
    </div>
</body>

<script type="text/ng-template" id="TestModal.html">
  <div class="modal-header">
  <h3 class="modal-title">Modal Test</h3>
  </div>
  <div class="modal-body">
  </div>
  <div class="modal-footer">
      <button class="btn btn-primary" type="button">OK</button>
      <button class="btn btn-warning" type="button">Cancel</button>
  </div>
</script>

JavaScript：

angular.module("TestApp", ["ui.bootstrap"]);

angular
    .module("TestApp")
    .controller("MainController", ["$scope", "$uibModal", MainController]);

function MainController($scope, $uibModal) {
    $scope.testModal = function () {
        $uibModal.open({
            animation: true,
            templateUrl: 'TestModal.html'
        });
    };
}

CSS：

.modal {
    top: auto; /* IE */
    top: initial;
}

.modal-dialog {
  width: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  border-radius: 0;
}

.modal.fade:not(.in) .modal-dialog {
    -webkit-transform: translate3d(0, 25%, 0);
    transform: translate3d(0, 25%, 0)
}

这是小提琴的链接： https : //jsfiddle.net/Ravvy/fyjLfxj0/1/

Answer 1

将此用作您的模态对话框类：

.modal-dialog {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

并摆脱.modal类。

无法通过背景幕点击关闭自定义UI引导模式

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-05-03 12:08:18

无法通过背景幕点击关闭自定义UI引导模式

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-05-03 12:08:18

解决方案1
1 已采纳 2016-05-03 12:08:18