LWC: Modal implementation

Check the code in the below repo for the modal implementation in LWC:
https://github.com/iamsonal/lwc-modal

Notes:

• If you want to hide the close icon, then set the hide-close property to true like below:



<!-- modalContainer.html -->
<template>
    <c-modal name="Modal Name" title="Modal Title" hide-close>
    </c-modal>
</template>

• Similarly, if you want to display a large modal, then set the is-large property to true like below:



<!-- modalContainer.html -->
<template>
    <c-modal name="Modal Name" title="Modal Title" hide-close is-large>
    </c-modal>
</template>




• Using slots (unnamed and named), we are passing the modal body and footer content from parent into the child component like below. In this way, we can control the markup that can be displayed in the modal. For more information about how to use slots, check the LWC documentation.



<c-modal name="Modal Name" title="Modal Title" >

    <!-- Unnamed Slot -->
    <p>This is some content</p>

    <!-- Named Slot -->
    <div slot="footer" style="display: inline;">
        <lightning-button label="Close" variant="neutral" onclick={handleCancelModal}></lightning-button>
    </div>
    
</c-modal>




• Set the style-class property to apply a custom CSS in the modal.