To create a button in a Lightning Web Component (LWC) that opens a modal window with columns A, B, C, D

<template>
    <!-- Button to open modal -->
    <lightning-button label="Open Modal" onclick={openModal}></lightning-button>

    <!-- Modal Window -->
    <template if:true={isModalOpen}>
        <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <!-- Modal/Popup Header -->
                <header class="slds-modal__header">
                    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
                            title="Close" onclick={closeModal}>
                        <lightning-icon icon-name="utility:close" alternative-text="close" size="small"></lightning-icon>
                        <span class="slds-assistive-text">Close</span>
                    </button>
                    <h2 class="slds-text-heading_medium">Enter Data</h2>
                </header>

                <!-- Modal/Popup Body -->
                <div class="slds-modal__content slds-p-around_medium">
                    <div class="slds-grid slds-gutters">
                        <!-- Column A -->
                        <div class="slds-col">
                            <lightning-input label="Column A" value={columnA} onchange={handleInputChange} data-id="A"></lightning-input>
                        </div>
                        <!-- Column B -->
                        <div class="slds-col">
                            <lightning-input label="Column B" value={columnB} onchange={handleInputChange} data-id="B"></lightning-input>
                        </div>
                        <!-- Column C -->
                        <div class="slds-col">
                            <lightning-input label="Column C" value={columnC} onchange={handleInputChange} data-id="C"></lightning-input>
                        </div>
                        <!-- Column D -->
                        <div class="slds-col">
                            <lightning-input label="Column D" value={columnD} onchange={handleInputChange} data-id="D"></lightning-input>
                        </div>
                    </div>
                </div>

                <!-- Modal/Popup Footer -->
                <footer class="slds-modal__footer">
                    <lightning-button variant="neutral" label="Cancel" onclick={closeModal}></lightning-button>
                    <lightning-button variant="brand" label="Save" onclick={handleSave}></lightning-button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

<script>
import { LightningElement, track } from 'lwc';

export default class ModalComponent extends LightningElement {
    @track isModalOpen = false;  // Track modal open/close state
    @track columnA = '';  // Track column A input
    @track columnB = '';  // Track column B input
    @track columnC = '';  // Track column C input
    @track columnD = '';  // Track column D input

    // Function to open modal
    openModal() {
        this.isModalOpen = true;
    }

    // Function to close modal
    closeModal() {
        this.isModalOpen = false;
    }

    // Function to handle input change
    handleInputChange(event) {
        const field = event.target.dataset.id;
        if (field === 'A') {
            this.columnA = event.target.value;
        } else if (field === 'B') {
            this.columnB = event.target.value;
        } else if (field === 'C') {
            this.columnC = event.target.value;
        } else if (field === 'D') {
            this.columnD = event.target.value;
        }
    }

    // Function to handle save button click
    handleSave() {
        // Perform your save logic here, e.g., call Apex or store the data
        console.log('Column A:', this.columnA);
        console.log('Column B:', this.columnB);
        console.log('Column C:', this.columnC);
        console.log('Column D:', this.columnD);

        // After saving, close the modal
        this.closeModal();
    }
}
</script>

<style>
.slds-modal__container {
    width: 40rem; /* Adjust the width of the modal */
}
</style>