Cacher is the code snippet organizer for pro developers

<template>
    <template if:true={showModal}>
        <div>
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
                aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container" style="align-items: center;">
                    <header class="slds-modal__header" style="min-width: 1100px;">
                        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
                            title="Close" onclick={handleClose}>
                            <lightning-icon icon-name="utility:close" alternative-text="close" variant="warning"></lightning-icon>
                            <span class="slds-assistive-text">Close</span>
                        </button>
                        <slot name="header">
                            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Header</h2>
                        </slot>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1" style="min-width: 1100px;">
                        <slot name="body">
                            <p>Body goes here..</p>
                        </slot>
                    </div>
                    <footer class="slds-modal__footer" style="min-width: 1100px;">
                        <template if:true={showNegative}>
                            <button class="slds-button slds-button_neutral" onclick={handleNegative}>{negativeButtonLabel}</button>
                        </template>
                        <template if:true={showPositive}>
                            <button class="slds-button slds-button_brand" onclick={handlePositive}>{positiveButtonLabel}</button>
                        </template>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>
    </template>
</template>

import { LightningElement, api } from 'lwc';

export default class UtilModal extends LightningElement {
  @api showPositive;
  @api showNegative;
  @api positiveButtonLabel = 'Save';
  @api negativeButtonLabel = 'Cancel';
  @api showModal;

  constructor() {
    super();
    this.showNegative = true;
    this.showPositive = true;
    this.showModal = false;
  }

  handlePositive() {
    this.dispatchEvent(new CustomEvent('positive'));
  }
  
  handleNegative() {
    this.dispatchEvent(new CustomEvent('negative'));
  }

  handleClose() {
    this.dispatchEvent(new CustomEvent('close'));
  }
}

<template>
    <h1>Parent component</h1>

    <lightning-button variant="brand" label="Open Modal" title="Open Modal" onclick={showModalPopup} class="slds-m-left_x-small"></lightning-button>

    
    <c-util-modal 
        show-modal={showModal} 
        show-positive={showPositiveButton}
        positive-button-label={positiveButtonLabel} 
        show-negative={showNegativeButton}
        onpositive={closeModal}
        onclose={closeModal}>
        <div slot="header">
            <h2 slot="header" id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Header from parent component</h2>
        </div>
        <div slot="body">
            Static or dynamic body content from parent. Can include other child lwc components also.
        </div>
    </c-util-modal>
</template>

import { LightningElement, track } from 'lwc';

export default class ModalParentExample extends LightningElement {
  //Variables to control modal window
  @track showModal = false;
  @track showNegativeButton;
  @track showPositiveButton = true;
  @track positiveButtonLabel = 'Close';

  closeModal() {
    this.showModal = false;
  }

  showModalPopup() {
    this.showModal = true;
  }
}