[英]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.