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

How to create Popup/Modal box in Salesforce Lightning Web Components

This post explains how to create Popup/Modal Box in Lightning Web components
What is Modal Box?
A modal dialog is a window that forces the user to interact with it before they can go back to using the parent application.

Example

LWCModalBoxDemo.html

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

        <template if:true={openmodel}>
        <div class="demo-only" style="height: 640px;">
            <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">
                    <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" size="medium">
                            </lightning-icon>
                            <span class="slds-assistive-text">Close</span>
                        </button>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">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" variant="neutral" onclick={closeModal}></lightning-button>&nbsp;&nbsp;&nbsp;&nbsp;
                        <lightning-button label="Save" variant="brand" onclick={saveMethod}></lightning-button>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>
        </template>
    </div>
</template>

LWCModalBoxDemo.js

import { LightningElement, track } from 'lwc';

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

LWCModalBoxDemo.js-meta.xml

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

Result

Happy Learning!!!