Everything you need to know on creating Custom Modal in Salesforce Lightning Web Component
Introduction:
Modal is a pop up which is displayed over the current page. This is used to show messages, records and create or editing the records in pop up window. Modal block everything else on the page until any action is performed or the modal is dismissed. A modal can be opened either on click of button or link. You can customize the header, footer and body of a modal. Modal can be closed by clicking on the close button.
Note:
- In the vast majority of the cases, Default Modals are used as wide as 50% of the viewport.
- Modals have to account for an equal amount of space at the top and bottom for the height of the close button.
- Modals grow flexibly as per the content within; but once reached a full height with the mentioned space on top and bottom, the content area begins to scroll.
- Modals have a tagline in the header by simply adding a paragraph in the heading.
- Modal’s content area does not have any spacing by default allowing the content such as tables to go full width.
- Large modals require a large amount of content and their height follows the same behaviour and styles. These modals need a linearly directional paradigm of navigation, that is, Next, Back, etc. the actionable buttons in the modal footer live on both left and right rather all on the right.
- Consider using a ‘Prompt’ if you are using Modal for a System Alert.
For Live Demo Click Here
Following is the demo code to create a Custom Code in Salesforce LWC:
- This Apex class returns the contact records which is required to show in the modal. The Apex method must be static and public or global and should be annotated with @AuraEnabled(cacheable=true).
Script:-1
2. The component’s JavaScript code imports the Apex method and invokes it via the wire service. The wire service provisions the list of contacts to the contact.data property. Create data table to show the contact record in table.
Create modal method and track it for the open or close state of modal.
Script:-2
3. The template uses the if:true directive to check whether the open modal is truthy. If yes then pop up window is displayed over the current page. Inside the modal, the template uses the if:true directive to check whether the contact.data property is truthy. If yes then it iterates over it and renders the details of each contact.
Script:-3
4. Create .xml file than deploy the apex class and lwc code in org.
Script:-4
Conclusion:
Now create your own Custom Modal in Salesforce Lightning Web Component. It is a simple task if understood properly. If you need any assistance in creating your Custom Modal, please reach out to us at sales@hicstwebackup.yoursalesforcedeveloper.com.
Happy Learning!
India 
USA
UK
Canada