[英]Angular UI modal with Bootstrap 4
Bootstrap 3模式工作正常: https : //jsfiddle.net/qLy7gk3f/4/
但Bootstrap 4模式不會: https : //jsfiddle.net/qLy7gk3f/3/
代碼完全相同:
$scope.click = function() {
$uibModal.open({
templateUrl: "modal.html",
controller: "modal",
scope: $scope
});
}
如何讓AngularUI模態與Bootstrap 4一起使用?
我認為這只是添加.in
類的一種情況,具體來說:
.fade.in {
opacity: 1;
}
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-backdrop.in {
filter: alpha(opacity=50);
opacity: .5;
}
更新小提琴: https : //jsfiddle.net/qLy7gk3f/5/
或者您可以修改Bootstrap 4以使用show
類: https : //github.com/angular-ui/bootstrap/issues/4234#issuecomment-285303515
我通過使用下面的css得到了解決方案
.modal.fade.in {
opacity: 1;
}
.modal.fade .modal-dialog {
transform: translate(0, 0) !important;
}
.modal-backdrop.fade {
opacity: 0.5 !important;
}
.modal-header{
display: block;
}
.modal-content{
border-radius: 1.3rem !important;
}
/ *用於Bootstrap的模態CSS修復4 * /
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.