wrong z-index for modal popups

[santo74]

After I upgraded from 4.4.2 to 4.5.1 the modal popups in the backend have a wrong z-index. As a result, they aren't clickable and therefore I can't edit the content.

The problem is that the "modal-backdrop" has a z-index of 1040 while the "modal-dialog" doesn't have an explicit z-index.

removing the z-index from the "modal-backdrop" or giving the "modal-dialog" an even higher z-index ( > 1040) solves the problem.

Example screenshot:

[maskas]

Where did you find this popup? Is it HTML widget? As HTML widget is working fine for me.

[jankus]

From a screenshot I'm making an assumption, that this is a custom theme. Does the theme is based on Bootstrap?

[santo74]

Yes, yes and yes :-) It's the html widget, it's a custom theme and it's indeed based on bootstrap. I don't do any z-index overrides in my own custom stylesheets however.

Further investigation shows that the z-index for the modal backdrop is defined in the default bootstrap theme:

In assets/less/modals.less:

// Modal background
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-modal-background;
  background-color: @modal-backdrop-bg;
  // Fade for backdrop
  &.fade { .opacity(0); }
  &.in { .opacity(@modal-backdrop-opacity); }
}

and in assets/less/variables.less:

//-- Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.

@zindex-navbar:            1000;
@zindex-dropdown:          1000;
@zindex-popover:           1010;
@zindex-tooltip:           1030;
@zindex-navbar-fixed:      1030;
@zindex-modal-background:  1040;
@zindex-modal:             1050;

*\ Edit: And as I mentioned earlier this behavior didn't occur in v4.4.2 so I suppose something related has changed in v4.5 ?

[maskas]

We have updated the Bootstrap itself in v4.5.0

[jankus]

Yes, the latest ImpressPages version uses the latest Bootstrap. And I saw that they have changed zIndex'es. Just tweek your own theme to correspond to those changes and everything will be ok.

[santo74]

Ok, I see. I'll just update my own theme for now and switch to an updated version of the IP Bootstrap theme when feasible.