时间戳

首页 > 解决方案 > 如何关闭特定的 mdc 对话框

web-applications - 如何关闭特定的 mdc 对话框

问题描述

我正在尝试创建一个对话框，该对话框显示更多图像库中单击图像的较大版本。到目前为止，我已经使用 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);
            }

        });
}

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

标签： web-applicationsdialogmodal-dialogmdc-components

解决方案

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

推荐阅读