Custom container for modal backdrop instead of body

[daftplug]

Summary

Appending modal backdrop to the custom element instead of default body tag

Detailed Description

On the modal element, you could define data-hs-backdrop-container="#customElement", for example, which would use this selector to append the backdrop element. This would allow modals to be displayed within a specific area of the web app.

This should not be confused with the existing data-hs-overlay-backdrop-container attribute, which lets you choose a custom element as the backdrop.

Use Cases

I'm developing a WordPress plugin and using Preline UI for the admin area. To prevent my CSS from interfering with anything else in the admin area and to avoid conflicts with WordPress's default CSS, I've added a custom prefix to all of my classes, using my plugin's container ID. However, this causes overlays not to work, as all my CSS is structured like this: #customElement .bg-red. Since the backdrop element is appended to the 'body' tag, no CSS is applied to it. This feature is most useful when you're working in an environment where you don’t have full control and need to isolate your work.

[daftplug]

Although I managed to resolve this using simple JavaScript, it would be nice to have it as a built-in feature:

const customElement = document.querySelector('#customElement');

document.addEventListener('open.hs.overlay', setTimeout(() => {
  const backdropElement = document.querySelector('[data-hs-overlay-backdrop-template]');
  if (backdropElement && backdropElement.parentElement !== customElement) {
    customElement.appendChild(backdropElement);
  }
}, 0));

[jahaganiev]

Hey @daftplug - we've added backdropParent parameter with v2.6.0 release. You may achieve now by passing some ID to the backdropParent parameter. Cheers!