Salesforce Lightning Web Component SLDS Modal without Popup

Salesforce Lightning Web Component SLDS Modal without Popup

We can make use of SLDS Modal CSS and avoid the popup if we avoid the slds-container CSS class.

Please check the following sample Lightning Web Component for reference.

Sample Lightning Web Component:

HTML:

<template>
    <div class="modal-header slds-modal__header">
        <h4 class="title slds-text-heading--large">Title</h4>
    </div>
    <div class="slds-modal__content slds-p-around--x-large">
        Sample Content
    </div>
    <div class="slds-modal__footer">
        <div class="slds-align_absolute-center">
            Footer
        </div>
    </div>
</template>

JavaScript:

import { LightningElement } from 'lwc';

export default class SampleLightningWebComponent extends LightningElement {
}

js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>62.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Output:

Leave a Reply