Skip to content

LWC to reusable modal window for enabling the display of supplementary information or actions without page navigation.

Notifications You must be signed in to change notification settings

s4SHIVam7/Modal_window_lwc

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 

Repository files navigation

Modal Window Lightning Web Component (LWC)

This Lightning Web Component (LWC) provides a reusable modal window that can be easily integrated into Salesforce Lightning App Pages and Lightning Record Pages. The modal window allows you to display additional information or actions to users without navigating away from the current page.

Modal Window Demo

Table of Contents

Features

  • Click a button to open the modal window.
  • Modal window includes a customizable header, content, and footer.
  • Close the modal window using the close button or the provided "Close" button.
  • Cross icon for closing the modal window in the header.(Optional)
  • Fully customizable styling using Salesforce Lightning Design System (SLDS) classes.
  • Suitable for various use cases where a modal dialog is required.

Installation

To use this Lightning Web Component in your Salesforce org, follow these steps:

  1. Clone or Download this Repository:

    • Clone this GitHub repository to your local machine using the following command:
      git clone https://github.com/s4SHIVam7/Modal_window_lwc.git
      
  2. Deploy the Lightning Web Component:

    • Deploy the modalWindow_lwc Lightning Web Component to your Salesforce org.
  3. Customize the Modal Window:

    • Modify the modalWindow_lwc.html as per your requirement.
  4. Add the Component to Your Salesforce Page:

    • Add the modalWindow_lwc component to your Lightning App or Record Page.

Usage

  1. Open a Salesforce Lightning Page or App:

    • Navigate to a Salesforce Lightning Page or App where you've added the modalWindow_lwc component.
  2. Click on Open Modal Button:

    • Click on the Open Modal Button to display another window.
  3. Click on Close Button:

    • Click on the Close Button to dismiss the window.

Customization

You can customize the header, body, footer by modifying the modalWindow_lwc.html.

<div class="slds-modal slds-fade-in-open" if:true={isModalOpen}>
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <h2 class="slds-text-heading_medium">Salesforce LWC</h2>
                    </header>
        
                    <div class="slds-modal__content slds-p-around_medium">
                        <p>hi buddy, have a good day :) </p>
                    </div>

                    <footer class="slds-modal__footer">
                        <button class="slds-button slds-button_neutral" onclick={closeModal}>Close</button>
                    </footer>
                </div>
            </div>

ScreenShots

  1. Main Component: image

  2. When Clicked on Open Modal Button: image

  3. When Clicked on Close Button: image

Contact

For questions, support, or feedback, please feel free to reach out:

About

LWC to reusable modal window for enabling the display of supplementary information or actions without page navigation.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published