FREE SALESFORCE LWC COMPONENT

Modal

For production, trap focus, restore focus to the triggering element, and close on Escape where appropriate.

Component structure

COMPONENTwcsModal

PLATFORMSalesforce Lightning Web Components

STARTERTemplate + JavaScript + CSS + Meta XML

HTML template

<template>
  <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading" class="slds-modal slds-fade-in-open">
    <div class="slds-modal__container">
      <header class="slds-modal__header">
        <h2 id="modal-heading">Confirm action</h2>
      </header>
      <div class="slds-modal__content slds-p-around_medium">Content</div>
    </div>
  </section>
  <div class="slds-backdrop slds-backdrop_open"></div>
</template>

JavaScript

import { LightningElement, api } from 'lwc';

export default class WcsModal extends LightningElement {
  @api title = 'Confirm action';
}

CSS

.slds-modal__container{max-width:36rem}

Meta XML

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