使用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类。