Overlay Library Popup for LWC?

Question

When developing Aura components in Lightning Experience, you can use the Overlay Library to create a popover (via showCustomPopover()).

Is there an equivalent for LWC, or can I only use this library in an Aura component? If the latter, is there any kind of workaround, like wrapping the LWC component in an Aura component?

Note: in my case, this is being used inside a LWC that is within an Aura component, so unfortunately I can't use slots. Perhaps this would be a reason to develop the parent component as an Aura component.

Answer 1

You can refer to the SLDS Modal Blueprint to achieve the exact same thing, furthermore, you can create a "reusable" modal lwc component such as this one (which uses the slds blueprint I linked)

<template>
    <section role="dialog" tabindex="-1" aria-modal="true" class="slds-modal slds-fade-in-open">
        <div class={modalClasses}>
            <header class="slds-modal__header">
                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close"
                onclick={handleCloseEvent}>
                    <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
                        <use xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg#close"></use>
                    </svg>
                    <span class="slds-assistive-text">Close</span>
                    </button>
                <slot name="header">
                </slot>
            </header>
            <div>
                <slot name="content">
                </slot>
            </div>
            <footer class="slds-modal__footer">
                <slot name="footer"></slot>
            </footer>
        </div>
    </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
</template>

and you can use it in your components as follows:

<c-custom-modal-box backdrop onclose={closeFilterModal}>
        <div slot="header">
           //your modal header content here
        </div>
        <div slot="content" class="modal-content slds-p-around_medium content-slot">
            //your modal content here
        </div>
    </c-custom-modal-box>

the js part should be fairly easy to implement (toggle the modal - displa-hide) and you can implement additional functionalities.