Modal positioning affected by parent dropdown menu

Question

Created a modal component, copying LDS modal blueprint html.

Inside lightning-button-menu have a button that shows the modal on click.

Overall, html structure looks like the following:

<lightning-button-menu>
  <c-button>
    <c-modal>
    </c-modal>
  </c-button>
</lightning-button-menu>

The problem is that Modal has slds-modal css class, specifying position: fixed. Usually that would not be a problem, unless a parent has transform property. Out of the box lightning-button-menu has slds-dropdown and slds-dropdown--right css classes with transform properties. Which messes up modal positioning - it is hiding in a dropdown.

How would one approach the solution?

• Remove transform property on parents? (Shadow DOM makes it hard to modify OOTB components)
• Pull the modal out of the button to root and communicate with it using events/message channel?

From my findings it is not just lightning-button-menu with transform properties, but nesting modals within modals has the same issue too.

Answer 1

As you've observed, putting a modal inside any UI component may have complications. To make a fully compatible modal dialog with support for overlapping, you'd want to create the modal library so it can be dynamic. Your code would look like:

<template>
 <c-modal if:true={showModal} onclosemodal={handleCloseModal}>
  <!-- modal content here -->
 </c-modal>
  <lightning-button-menu>
    <c-button onclick={onButtonClick}>
    </c-button>
  </lightning-button-menu>
</template>

Which you'd trigger as you expect:

onButtonClick() {
  this.showModal = true;
}

Now, if you want multiple modals, you can do that, too:

<template>
 <c-modal if:true={showModal1} onclosemodal={handleCloseModal1}>
  <!-- modal content here -->
 </c-modal>
 <c-modal if:true={showModal2} onclosemodal={handleCloseModal2}>
  <!-- modal content here -->
 </c-modal>
  <lightning-button-menu>
    <c-button onclick={onButtonClick1}>
    </c-button>
    <c-button onclick={onButtonClick2}>
    </c-button>
  </lightning-button-menu>
</template>

Modals should stack just fine on top of each other if there's no interference with UI elements.

You don't necessarily need to dig as deep as a LMS (Lightning Message Service) channel, just keep your modals outside UI elements. I believe there might still be some edge cases where they won't work, but generally speaking, as long as you make sure that none of the ancestors to your component don't have positioning, the modals should work correctly.