可以'不要通过背景点击来取消自定义UI引导模式

Can't dismiss custom UI Bootstrap modal by backdrop click

本文关键字：取消 自定义 UI 模式 背景 可以      更新时间：2023-09-26

使用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/

将其用作模式对话框类：

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

并去掉.modal类。

相关文章：