Allow a popup with an overlay to display on top of other popups

[marklchaves]

Describe the feature request

Right now when you have:

1. More than one popup appears on the same page.
2. One of those popups has an overlay turned on.

Then, the overlay doesn't show for the popup that has the overlay turned on.

It'd be great to have the overlay show for the one popup that has overlay turned on (giving it a higher display priority).

Use case

Original OP's use case:

1. Create a popup with no overlay.
2. Create a popup with an overlay.
3. Display both popups on the same page.
4. Both overlays are hidden.

Example screenshots (if any)

[marklchaves]

The workaround is a manual CSS fix.

/* Force the overlay to display for the popup that has an overlay when there are multiple popups. */
html.pum-open.pum-open-overlay-disabled.pum-open-scrollable .pum-overlay.pum-active {
  position: fixed;
  /* visibility: visible; Add this if needed. */
}
/* NOTE: Reduce the z-index for the other popups. */

Ideally, the permanent fix should make needed adjustments automatically. We might need a rule that only 1 popup can have an overlay on a page.

[danieliser]

This comes from the fact our body classes control overlay visibility. Just needs to be recoded to not rely on those things.

The body classes are intended to fix issues that come up from the documents main scroll bar as well as controlling aria-hidden.

It was then used (I believe) to control the way popup overlays were handled because we were already modifying those classes on popup open, and it seemed to handle every use case I was covering at the time. Partially because it didn't require writing custom CSS to the page for every popup, but we already have that feature built out and optimized so not such a big deal now.

Now we need to control the visibility of each popup via CSS output for that popup based on its settings.

If you want to take a crack at that I'll point you in the right direction, should probably encompas:

• removing some of the logic from global body
• modifying the per popup generated CSS to add visibility modifiers as needed.