Modal not working in bootstrap 4.6

[rossanmol]

Angular UI was working until [alpha 5] but with the new version the modal does not appear at all. What I've noticed is that show class is missing.

   $uibModal.open({
    animation: true,
    templateUrl: templateUrl,
    controller: function modalController($scope, $uibModalInstance) {

      $scope.cancel = function() {
          $uibModalInstance.dismiss();
      };

    },
    controllerAs: 'modalCtrl',
    size: 'lg',
    windowClass: windowClass
  });

[dduubb]

Certainty is an issue of missing the 'show' class, in lieu of a proper solution you can cram show into the ui-bootstrap.tpls file at the modal-instance "q.attr({"class":"modal show"," , animations fail but the modals are visible. Hope this helps someone find a proper solution.

[theroymind]

another fix if you're using SCSS is to manually extend the classes to add the show:

body.modal-open {
  .modal {
    @extend .show;
  }
  .modal-backdrop {
    @extend .modal-backdrop.show;
  }
}

[wesleycho]

I would be open to a PR adding the toggling of the show class in the library itself - the CSS must be provided by the user though, as this library officially supports Bootstrap 3 out of the box.

[singhmohancs]

Here is proper fix for this - if you are using angular-bootstrap 2.4 with latest Twitter bootstrap SCSS

    .modal {
        &.in {
            opacity: 1;
            .modal-dialog {
                -webkit-transform: translate(0, 0);
                -o-transform: translate(0, 0);
                transform: translate(0, 0);
            }
        }
    }
    .modal-backdrop {
        &.fade {
            filter: alpha(opacity=0);
            opacity: 0;
        }
        &.in {
            filter: alpha(opacity=50);
            opacity: .5;
        }
    }
}

[DeckardTheReplicant]

This issue is fixed with bootstrap v4.0 beta by adding windowClass: 'show', backdropClass: 'show' to the end of the $uibModal.open function.

Is there really a need to implement a solution to a problem which only occurs in an alpha?

[joelstein]

This also works:

angular.module('myApp').config(['$uibModalProvider', function($uibModalProvider) {
  $uibModalProvider.options.windowClass = 'show';
  $uibModalProvider.options.backdropClass = 'show';
}]);

[joelstein]

Actually, this is probably the simplest way to do it. Just add this bit of CSS, which adds the correct transitions, as well. (There's no need to configure the $uibModalProvider.)

.modal.fade.in {
  opacity: 1;
}
.modal.in .modal-dialog {
  transform: translate(0, 0);
}
.modal-backdrop.in {
  opacity: 0.5;
  /* opacity: $modal-backdrop-opacity; (SCSS) */
}

Ideally, though, there would be an option that would allow us to specify the animation class ("in" for Bootstrap 3, "show" for Bootstrap 4).

[gitdealdo]

I'm working with bootstrap 4.0 but the modal was not shown, with the CSS works better, thanks for sharing