如何关闭特定的 mdc 对话框

Question

我正在尝试创建一个对话框，以显示来自更多图像库的单击图像的放大版本。到目前为止，我已经使用 MDC-web 组件和 Java-script 成功打开了单击的特定图像的对话框（图像基本上是一张以实际图像为背景的卡片）但是，当我尝试关闭对话框时，它不会关闭。 下面是javascript代码： 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);
            }

        });
}

如果有的话，您可以帮助我解决问题，将不胜感激。谢谢。

Answer 1

看起来每次关闭对话框时都会创建一个新的 MDC 对话框实例。您应该将对话框的实例存储在关闭函数之外。 此外，您可以在没有额外功能的情况下关闭对话框，只需使用 MDC Dialog 的 close() 方法：