web-dev-qa-db-fra.com

Angular Interface utilisateur modale avec Bootstrap 4

Le modal Bootstrap 3 fonctionne bien: https://jsfiddle.net/qLy7gk3f/4/

Mais Bootstrap 4 modal ne: https://jsfiddle.net/qLy7gk3f/3/

Le code est identique:

$scope.click = function() {
  $uibModal.open({
    templateUrl: "modal.html",
    controller: "modal",
    scope: $scope
  });
}

Comment puis-je faire en sorte que les modaux AngularUI fonctionnent avec Bootstrap 4?

angularjstwitter-bootstrapangular-uitwitter-bootstrap-4
7
Sean

Je pense qu'il ne s'agit que d'ajouter les classes .in, plus précisément:

.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;
}

Violon mis à jour: https://jsfiddle.net/qLy7gk3f/5/

Vous pouvez également modifier Bootstrap 4 pour utiliser la classe show: https://github.com/angular-ui/bootstrap/issues/4234#issuecomment-285303515

26
Sean

J'ai eu la solution en utilisant ci-dessous 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;
}

/ * Correctif CSS modal pour Bootstrap 4 * /

0
Manveer Singh