function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Shavi DabgotraShavi Dabgotra 

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");
        }
        
    }
}

 

Best Answer chosen by Shavi Dabgotra
CharuDuttCharuDutt
Hii Shavi Dabgotra
Just Copy Paste  The following code
<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"
        >
        </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>
      <template if:true={ready}>
        <div class="slds-box slds-theme_shade">
          <div class="slds-modal slds-fade-in-open slds-backdrop">
            <div class="slds-modal__container">
              <!--HEADER Section-->

              <div class="slds-modal__header">
                <lightning-button-icon
                  icon-name="utility:close"
                  alternative-text="Close this window"
                  size="large"
                  variant="bare-inverse"
                  onclick={closeModal}
                  class="slds-modal__close"
                >
                </lightning-button-icon>
                <h2>Rename LWC Setup.docx</h2>
              </div>
              <!---Body Section-->
              <div class="slds-modal__content slds-p-around_medium">
                <lightning-input
                  type="text"
                  name="folder_name"
                  label="Rename"
                  placeholder="Enter new item name"
                >
                </lightning-input>
              </div>
              <!--Footer Section-->
              <div 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>
              </div>
            </div>
          </div>
        </div>
      </template>
    </lightning-card>
  </div>
</template>





---------------------------------------------------------------------------------------------------

js



 @track selectedItemValue;
    ready = true;
    handleOnselect(event) {
        this.selectedItemValue = event.detail.value;
        alert(this.selectedItemValue);
        if(this.selectedItemValue == 'rename')
        {
        this.ready = true;
        }
        
    }
    closeModal(){
        this.ready = false;
    }

Please Mark It As Best Answer If it Helps Thank you

All Answers

CharuDuttCharuDutt
Hii Shavi Dabgotra
Just Copy Paste  The following code
<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"
        >
        </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>
      <template if:true={ready}>
        <div class="slds-box slds-theme_shade">
          <div class="slds-modal slds-fade-in-open slds-backdrop">
            <div class="slds-modal__container">
              <!--HEADER Section-->

              <div class="slds-modal__header">
                <lightning-button-icon
                  icon-name="utility:close"
                  alternative-text="Close this window"
                  size="large"
                  variant="bare-inverse"
                  onclick={closeModal}
                  class="slds-modal__close"
                >
                </lightning-button-icon>
                <h2>Rename LWC Setup.docx</h2>
              </div>
              <!---Body Section-->
              <div class="slds-modal__content slds-p-around_medium">
                <lightning-input
                  type="text"
                  name="folder_name"
                  label="Rename"
                  placeholder="Enter new item name"
                >
                </lightning-input>
              </div>
              <!--Footer Section-->
              <div 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>
              </div>
            </div>
          </div>
        </div>
      </template>
    </lightning-card>
  </div>
</template>





---------------------------------------------------------------------------------------------------

js



 @track selectedItemValue;
    ready = true;
    handleOnselect(event) {
        this.selectedItemValue = event.detail.value;
        alert(this.selectedItemValue);
        if(this.selectedItemValue == 'rename')
        {
        this.ready = true;
        }
        
    }
    closeModal(){
        this.ready = false;
    }

Please Mark It As Best Answer If it Helps Thank you
This was selected as the best answer
Shavi DabgotraShavi Dabgotra

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 

CharuDuttCharuDutt
Hii Shavi Dabgotra

as you see bellow  @track selectedItemValue the ready is true make it false
copy paste the following 
@track selectedItemValue;
    ready = false;
    handleOnselect(event) {
        this.selectedItemValue = event.detail.value;
        alert(this.selectedItemValue);
        if(this.selectedItemValue == 'rename')
        {
        this.ready = true;
        }
        
    }
    closeModal(){
        this.ready = false;
    }


Please Mark It As Best Answer If it Helps Thank you!
Shavi DabgotraShavi Dabgotra
Thank you so much !
Song Lyrics KingSong Lyrics King
Great, Thanks For Providing Code


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/)
orla oasiorla oasi
Thank you for sharing this script. I want to use for my getinfov (https://getinfov.com/) website.
Albart kingAlbart king
Excellent site. Plenty of helpful information here. I am sending it to some buddies ans additionally sharing in delicious.
Visit on AMI Complaint number (http://nzcustomerhelp.com/ami-insurance-complaints-number-email/)
daldo dwdaldo dw
Thanx for the author for great  Rasmalai recipe in hindi (https://merirecipe.in/rasmalai-banane-ki-recipe/)
sew gadgetssew gadgets
How i can use this on what is low shank sewing machine (https://sewgadgets.com/what-is-a-low-shank-sewing-machine/)? Thanks in advance.
james lorensjames lorens
THanks for an interesting solution.
james lorensjames lorens
Let's take a brief look at the challenges involved in mobile software development. I also recommend all developers this review https://mlsdev.com/blog/app-development-cost One of the biggest challenges is that of meeting the customer's expectations right from the start. The first step to success is making the customer happy with the product or service in the first place. The second step is then to convert these expectations into an informed decision. This process is generally referred to as Customer Needs Analysis (CDA).
Aryan Gupta 11Aryan Gupta 11
If you want to know sbout vedic msths, which surely will increasenyour brain energy and youll be able to code easiky and efficiently, use this link here to understand in Hindi https://blogseva.com/what-is-vedic-maths-kya-hai-in-hindi/