ngx-modialog: Modal not showing when used with Bootstrap V4

I spent some time wondering why the modal would not show on screen, now I found out and I want to share my insights in case anyone has the same problem.

The reason was a breaking change in Bootstrap 4.0.0-alpha.6. In earlier Versions, class=“fade in” on the modal caused it to a) be hidden and b) smoothly appear. It seems that the “in” class has now been renamed to “show”. angular2-modal gives its element the classes “fade in” however, so they just disappear.

Workaround

Override styles:

.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 {
  opacity: 0.5;
}

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 83
Comments: 27 (2 by maintainers)

Most upvoted comments

I can confirm that the same issue occurs, however I had to include important tags in order to override the default css. Here’s the revised version.

.fade.in {
  opacity: 1;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.modal-backdrop .fade .in {
  opacity: 0.5 !important;
}


.modal-backdrop.fade {
    opacity: 0.5 !important;
}

+32

dimejy2 on Jan 12, 2017

OK @jsnkelvin @shabbir-dhangot:

I managed to get rid of the delay given the hint from my workaround. The combineLatest RXJS method waits for a myAnimationEnd$ from both the backdrop and container. The issue with @dimejy2’s CSS workaround looks like it prevents the animation on the modal-background by setting the opacity to 0.5 for both .fade and .fade .in. What is working for me is @nbckr’s original snippet:

.fade.in {
  opacity: 1;
}

.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.modal-backdrop.in {
  opacity: 0.5;
}

And a plunker: http://plnkr.co/edit/b44cBG0LdXTS7jMlXsfA

@shlomiassaf, it looks like the only changes for bootstrap 4 (alpha 6 at least) is to update any instances of the in class to show and this workaround will no longer be necessary. I can create a PR if you’re interested.

+18

dan-nawrocki on Feb 21, 2017

Did you add this to your HTML?

<!-- Enable bootstrap 4 theme -->
<script>window.__theme = 'bs4';</script>

Thats currently required for v4

JhonnyHRocha on Jul 5, 2017

Thanks for the headsup @nielsboecker as this is also unsurprisingly a problem with bootstrap 3 framework… to get modal to show use following scss based on Niels’ post:

.fade.show {
  opacity: 1 !important;
}

.modal.show .modal-dialog {
  -webkit-transform: translate(0, 0) !important;
  -o-transform: translate(0, 0) !important;
  transform: translate(0, 0) !important;
}

.modal-backdrop .fade .show {
  opacity: 0.5 !important;
}

.modal-backdrop.fade {
  opacity: 0.5 !important;
}

… and rather use component to open modal as the templateRef doesn’t seem to work… come on ngx-bootstrap developers you claim your ngx framework is re bootstrap backwards compatible 😃

ryanki1 on Oct 15, 2021

I have this working with Bootstrap 4.3.1

Create a new css file such as Overrides.css
Put the following code in it:

.fade.in { opacity: 1 !important; }

.modal.in .modal-dialog { -webkit-transform: translate(0, 0) !important; -o-transform: translate(0, 0) !important; transform: translate(0, 0) !important; }

.modal-backdrop .fade .in { opacity: 0.5 !important; }

.modal-backdrop.fade { opacity: 0.5 !important; }

Load this new file LAST in your Bundles.cs or whatever mechanism you are using to load support files

This is very similar to what you see above BUT the “!important” attribute has been added to some of the items.

Howzilla on Jul 18, 2019

@dimejy2 code works well, but there is some delay on background fading when closing the modal. maybe because the fade out got replaced too.

is there any way to fix that? thanks!

jsnkelvin on Jan 24, 2017

@JoshuaCaputo Yes, But there is nothing to do with curtain. Even if you remove class (curtain), the modal will appear. If we use the given modal examples in Bootstrap 4, it works. But when we use the modal examples for Bootstrao 4.1.3, it doesn’t works. Please raise a ticket for this issue.

castlejiant on Sep 12, 2018

Also experiencing this issue: 4.1.3/css/bootstrap.min.css 4.1.3/js/bootstrap.min.js

The workaround does seem to fix this confict. mabe fade should be something not some widespread… it sort of curtains…

class="modal curtain"

JoshuaCaputo on Aug 26, 2018

@shabbir-dhangot we’re using Angular2-modal as it allows you to create modals from TypeScript with fluent API. That’s not possible with ng-bootstrap’s version.

rolandoldengarm on Mar 15, 2017

@shlomiassaf here is a plunker showing the problem: http://plnkr.co/edit/b44cBG0LdXTS7jMlXsfA.

I suspect this issue is related to #217. The delay noted in this ticket appears to be caused by the animation effect callback never being triggered as described in the other ticket; this also causes the modal-open class to be “stuck” on the <body>.

As a workaround for the delay, you can comment out a few lines in modal.js and it works (albeit without animation):

          //backdrop.myAnimationEnd$()
               //.combineLatest(container.myAnimationEnd$(), function (s1, s2) { return [s1, s2]; })
               //.subscribe(function (sources) {
               _this.overlay.groupStackLength(dialogRef) === 1 && document.body.classList.remove('modal-open');
               completer.resolve();
           //});

Edit: use code tags and add workaround

dan-nawrocki on Feb 12, 2017

I can confirm the issue and the workaround. With Boostrap 4.0.0-alpha.6, calling the open method makes the application appear to hang, scrolling is disabled but the screen content does not change. This is due to the modal being present but not visible.

achimha on Jan 11, 2017