Question

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

它工作正常，但我无法点击背景来关闭模态。如果我删除填充和边距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

使用此作为模态对话框类：

Columns

并摆脱.modal类。

无法通过单击背景消除自定义UI Bootstrap模式

1 个答案: