Enable LWC Stacked Modals in Salesforce

ational efficiency. Happy coding!Lightning Web Components (LWC) in Salesforce offer a modern, fast, and efficient way to build custom user interfaces. One common requirement is to display multiple modals, also known as stacked modals, where a new modal overlays the existing one. Salesforce supports stacked modals, but enabling and implementing them in LWC requires some configuration and coding.

This article will guide you through enabling and creating stacked modals in Salesforce Lightning Experience.

---

What Are Stacked Modals?

Stacked Modals allow multiple modals to be displayed simultaneously, layered on top of each other. This is useful in scenarios where a secondary action, such as editing related data, is triggered within an already-open modal.

---

Steps to Enable LWC Stacked Modals in Salesforce

1. Check Salesforce UI API Version

Stacked modals require an updated Salesforce API version. Ensure that your Salesforce org is using a version that supports stacked modals (API version 54.0 or later).

2. Update lightning/modal Metadata

Ensure your Lightning Web Components are configured to use the lightning/modal module, which is essential for creating modals.

---

Implementation: Create Stacked Modals in LWC

Step 1: Build the Base Modal Component

Create a base modal component that can display dynamic content. Save this file as baseModal.html:

baseModal.html:

<template>
<section class="slds-modal slds-fade-in-open" tabindex="-1" aria-labelledby="modal-heading" aria-modal="true">
<div class="slds-modal__container">
<header class="slds-modal__header">
<h2 class="slds-text-heading_medium">{title}</h2>
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" onclick={closeModal}>
<lightning-icon icon-name="utility:close" alternative-text="close" variant="bare"></lightning-icon>
</button>
</header>
<div class="slds-modal__content slds-p-around_medium">
<slot></slot>
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral" onclick={closeModal}>Cancel</button>
<button class="slds-button slds-button_brand" onclick={confirmModal}>Confirm</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>

baseModal.js:

import { LightningElement, api } from 'lwc';

export default class BaseModal extends LightningElement {
@api title = 'Default Modal Title';

closeModal() {
this.dispatchEvent(new CustomEvent('close'));
}

confirmModal() {
this.dispatchEvent(new CustomEvent('confirm'));
}
}

---

Step 2: Parent Component to Trigger Stacked Modals

Create a parent component that handles opening multiple modals. Save this file as stackedModals.html:

stackedModals.html:

<template>
<lightning-button label="Open First Modal" onclick={openFirstModal}></lightning-button>
<template if:true={isFirstModalOpen}>
<c-base-modal title="First Modal" onclose={closeFirstModal} onconfirm={openSecondModal}>
<p>This is the content of the first modal.</p>
</c-base-modal>
</template>

<template if:true={isSecondModalOpen}>
<c-base-modal title="Second Modal" onclose={closeSecondModal}>
<p>This is the content of the second modal.</p>
</c-base-modal>
</template>
</template>

stackedModals.js:

import { LightningElement, track } from 'lwc';

export default class StackedModals extends LightningElement {
@track isFirstModalOpen = false;
@track isSecondModalOpen = false;

openFirstModal() {
this.isFirstModalOpen = true;
}

closeFirstModal() {
this.isFirstModalOpen = false;
}

openSecondModal() {
this.isSecondModalOpen = true;
}

closeSecondModal() {
this.isSecondModalOpen = false;
}
}

---

Styling Your Modals for Stacking

Ensure proper CSS styling to handle the z-index layering for stacked modals. Add the following CSS in your modal components to ensure higher layering for each modal:

baseModal.css:

.slds-modal {
z-index: var(--modal-layer, 1000);
}

.slds-backdrop {
z-index: var(--modal-backdrop-layer, 999);
}

When opening a new modal, increment the --modal-layer and --modal-backdrop-layer values dynamically.

---

Best Practices for Using Stacked Modals

1. Limit the Number of Stacked Modals:
   • Avoid stacking more than 2-3 modals to prevent user confusion.
2. Ensure Accessibility:
   • Set appropriate aria attributes for modals to enhance screen reader support.
3. Maintain Performance:
   • Close unused modals to reduce DOM complexity.
4. Use Dynamic Content:
   • Populate modals dynamically using slots to make them reusable.

---

Conclusion

Enabling and implementing stacked modals in Salesforce using LWC enhances the user experience by supporting seamless workflows and interactions. By following the steps outlined in this guide, you can create functional and visually appealing stacked modals that align with Salesforce Lightning Design System (SLDS) guidelines.