+ 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.