reusableModal.html

<template>
        <lightning-button variant="brand" label={buttonLabel} onclick={handleShowModal}>
        </lightning-button>
    <template if:true={modal}>
        <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01"
            class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <button class="slds-button slds-button_icon slds-modal__close" onclick={handelOutModal}>
                    <lightning-button-icon icon-name="utility:close"  
                     alternative-text="Close" 
                     title="Close"
                    ></lightning-button-icon>
                </button>
                <div class="slds-modal__header">
                    <h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate" tabindex="-1">{headerLabel}</h1>
                </div>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <slot>Modal body goes here</slot>
                </div>
                    <div class="slds-modal__footer" if:false={hideFooter}>
                        <slot name="footer-actions"></slot>
                        <button class="slds-button slds-button_brand" onclick={handelOpenModal} if:false={hideClose}>{closeButton}</button>
                    </div>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
    </template>
</template>

reusableModal.js

import { LightningElement, api} from 'lwc';

export default class ReusableModal extends LightningElement {
    modal = false;
    @api hideFooter = false;
    @api hideClose = false;
    @api buttonLabel = 'Show Modal';
    @api headerLabel='Re-Usable Modal';
    @api closeButton = 'Close';
    handleShowModal(){
        this.modal = true;
    }
    handelOpenModal(){
        this.modal= false;
    }
    handelOutModal(){
        this.modal= false;
    }
}

Different types of modal's with modifications

Default Preview:

<c-reusable-modal></c-reusable-modal>

@override button-label

<c-reusable-modal button-label="Open PopUp"></c-reusable-modal>

@Override body-part

<c-reusable-modal > Override Body</c-reusable-modal>

@override modal header-text

<c-reusable-modal header-label='Modal Header'></c-reusable-modal>

@override modal close-button

<c-reusable-modal close-button="Cancel"></c-reusable-modal>

Hide modal close-button

<c-reusable-modal hide-close="true"></c-reusable-modal>

Hide Footer part

<c-reusable-modal hide-footer="true"></c-reusable-modal>

Add button in footer

<c-reusable-modal>
            <button class="slds-button slds-button_brand slds-m-around_medium">save</button>
</c-reusable-modal>

reusable-modal use to create quick popup with easy to modify the layout
Happy Coding!

Blogs

reusable-modal in LWC