Multiple modals on the page

[alexandrursu]

If we try too use Multiple modals on the page there is an overlay issue. All popups use overlay from the latest popup in the DOM. It's causing big problems ... probably to solve this issue we need to change id's for overlays as well

[allenhwkim]

This is by design not to use multiple modals like the same as browser alert or confirm. I don't see it as a big problem. I see opening multiple modals could be more chaotic.

[alexandrursu]

So, we had a case where 3 modals were implemented, in navigation, in body and footer, this makes popup use only the latest overlay from the DOM.

To fix the problem I have added classes to each modal and then add following CSS to the container styles:

.popup-container {
  &.your-class {
    position: fixed;
    left: 50%;
    z-index: 999999999;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
}