使用 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)
}
这是一个 fiddle 的链接: https://jsfiddle.net/Ravvy/fyjLfxj0/1/
最佳答案
将其用作您的模态对话框类:
.modal-dialog {
position: absolute;
bottom: 0;
width: 100%;
margin: 0;
padding: 0;
}
并摆脱 .modal 类。
关于javascript - 无法通过背景单击关闭自定义 UI Bootstrap 模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36992597/