Angular UI 模态与 Bootstrap 4
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
classes 的情况,具体来说:
.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;
}
已更新fiddle:
https://jsfiddle.net/qLy7gk3f/5/
或者您可以修改 Bootstrap 4 以使用 show
class:
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;
}
/* 模态 CSS 修复 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
classes 的情况,具体来说:
.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;
}
已更新fiddle: https://jsfiddle.net/qLy7gk3f/5/
或者您可以修改 Bootstrap 4 以使用 show
class:
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;
}
/* 模态 CSS 修复 Bootstrap 4*/