You need to sign in to do that
Don't have an account?

How a pop up will appear after clicking of a drop down menu.
Hi,
I have created a drop down menu in lightning web component. But, I want a pop up will appear on click of a menu item.
I tried this for pop up, But it is not working. On click of a "Rename " Menu item . A pop up will be shown.
button.html
<template>
<div class="slds-p-around_medium lgc-bg">
{selectedItemValue}
{ready}
<lightning-card title="Drop Down">
<lightning-button-menu alternative-text="Show menu" variant="border-filled" onselect={handleOnselect}>
{selectedItemValue}
<lightning-menu-item value="openinsharepoint" label="Open in SharePoint" prefix-icon-name="utility:new_window"
href="#"
target="_blank">
</lightning-menu-item>
<lightning-menu-item value="rename" label="Rename" prefix-icon-name="utility:edit">
<template if:true={ready}>
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small"
aria-labelledby="modal-heading-01" aria-modal="true" aria-hidden="true"
aria-describedby="modal-content-id-1">
<div class="slds-modal__container">
<!-- Modal/Popup Box LWC header here -->
<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"
variant="inverse"
size="small" ></lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Rename LWC Setup.docx</h2>
</header>
<!-- Modal/Popup Box LWC body starts here -->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<lightning-input type="text" name="folder_name" label="Rename" placeholder="Enter new item name">
</lightning-input>
</div>
<!-- Modal/Popup Box LWC footer starts here -->
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
<button class="slds-button slds-button_brand" onclick={submitDetails} title="Create">Create</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
</lightning-menu-item>
<lightning-menu-item value="download" label="Download" prefix-icon-name="utility:download">
</lightning-menu-item>
<div class="slds-has-divider_top-space" role="separator">
<lightning-menu-item value="delete" label="Delet" prefix-icon-name="utility:close"></lightning-menu-item>
</div>
</lightning-button-menu>
</lightning-card>
</div>
</template>
button.js
import { LightningElement, track } from 'lwc';
export default class ButtonMenuOnselect extends LightningElement {
@track selectedItemValue;
@track ready;
handleOnselect(event) {
this.selectedItemValue = event.detail.value;
if(this.selectedItemValue == "rename")
{
alert("ready");
this.ready = true;
alert("false");
}
}
}
Just Copy Paste The following code
Please Mark It As Best Answer If it Helps Thank you
All Answers
Just Copy Paste The following code
Please Mark It As Best Answer If it Helps Thank you
Hi Charu!
Thank you so much!
But when I am loading page for the first time, then also the pop up is shown.
How to fix it?
Please help
as you see bellow @track selectedItemValue the ready is true make it false
copy paste the following
Please Mark It As Best Answer If it Helps Thank you!
Tera Suit Lyrics in Hindi - Tony Kakkar (https://www.songlyricsking.com/tera-suit-lyrics-in-hindi-tony-kakkar/)
Bholenath Ki Shadi Lyrics in Hindi (https://www.songlyricsking.com/bholenath-ki-shadi-lyrics-in-hindi-hansraj-raghuwanshi/)
Visit on AMI Complaint number (http://nzcustomerhelp.com/ami-insurance-complaints-number-email/)