How to increase Modal/Popup width in Lightning Web Component(lwc)

This post explains how to increase the modal/popup width in lightning web component(lwc)

IncreaseWidthOfModalBoxInLWC.html

<template>

    <center class="slds-theme_default">
        <p>
            <b>Show Modal Box using Lightning Web Componentes</b>
        </p><br/><br/>
        <lightning-button label="Show Modal" onclick={openmodal} variant="brand"></lightning-button>
    </center><div></div>

    <template if:true={openmodel}>
        <section aria-describedby="modal-content-id-1" aria-labelledby="modal-heading-01" aria-modal="true" class="slds-modal slds-fade-in-open" role="dialog" tabindex="-1">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" onclick={closeModal} title="Close">
                        <lightning-icon icon-name="utility:close" size="medium" variant="inverse"></lightning-icon>
                        <span class="slds-assistive-text">Close</span>
                    </button>
                    <h2 class="slds-text-heading_medium slds-hyphenate" id="modal-heading-01">Modal Box Example</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <center>
                        <h2>
                            <b>Welcome to Salesforce Code Crack</b>
                        </h2><br/>
                        <p>Happy Learning!!!</p>
                    </center>
                </div>
                <footer class="slds-modal__footer">
                    <lightning-button label="Cancel" onclick={closeModal} variant="neutral"></lightning-button>&nbsp;&nbsp;&nbsp;&nbsp;
                    <lightning-button label="Save" onclick={saveMethod} variant="brand"></lightning-button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

Approach 1:

Using external CSS File
To create a .css file,
follow the step:
1. Right-click on your lwc component.
2. Select New File
3. Name the file same as your lwc component with the .css extension

IncreaseWidthOfModalBoxInLWC.css

.slds-modal__container {
    max-width: 80rem !important;
    width: 80% !important;
}

Approach 2:

Using Static Resource

Create the normal .css file, upload css file in static resources and import static resource file in your Lightning web component

check below link how to import static resources in lwc

https://www.salesforcecodecrack.com/2019/01/how-to-access-static-resources-in.html

IncreaseWidthOfModalBoxInLWC.js

import { LightningElement, track } from 'lwc';

export default class IncreaseWidthOfModalBoxInLWC extends LightningElement {
    @track openmodel = false;
    openmodal() {
        this.openmodel = true
    }
    closeModal() {
        this.openmodel = false
    } 
    saveMethod() {
        alert('save method invoked');
        this.closeModal();
    }
}

IncreaseWidthOfModalBoxInLWC.js-meta.xml

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

Result