0

I am trying to create a dialog that displays a larger version of the clicked image from a gallery of many more images. So far, I have used MDC-web components and Java-script to successfully open the dialog of the specific image clicked (the image is basically a card with the actual image as its background) however, when I try and close the dialog, it won't close. Below is the javascript code: let dialog; const dialogs = document.querySelectorAll('.mdc-dialog');

   for(let i =0; i<dialogs.length; i++){
     dialog = new mdc.dialog.MDCDialog(dialogs[i]);
    //console.log(dialog);
    const cardClicked = dialogs[i].parentElement;
    console.log(cardClicked);

    cardClicked.addEventListener("click",(event)=>{
            if(dialog.isOpen){
                console.log(dialog.open)

                dialog.close();

            }else{
                console.log("open ish--> is open is false");
                dialog.open();
                console.log(dialog);
            }

        });
}

If there is anyway, that you can help me resolve the issue that would be much appreciated. Thanks.

Abby Ammo
  • 21
  • 2

1 Answers1

0

looks like a new instance of MDC Dialog is created every time your dialog gets closed. You should store the instance of dialog outside the closing function. Also, you can close dialog without extra function, just using MDC Dialog's close() method:

wise_one
  • 1
  • 2
  • Hi, please would you mind elaborating on how I can store the instance of dialog outside the function? Thank you so much – Abby Ammo Aug 23 '21 at 16:36