文章内容
2023/5/7 17:38:02,作 者: 黄兵
MDCDialog 无法关闭问题总结
最近在使用 MDCDialog 的样式库，点击打开 Dialog 的代码如下：
function deleteNumberAction() {
// 获取所有具有类名 "btn" 的元素
var buttons = document.getElementsByClassName("btn");
// 遍历每个按钮并绑定单击事件
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
if (button.id.startsWith("delete-number-")) { // 过滤掉不需要的按钮
button.addEventListener("click", function () {
// 在这里添加处理单击事件的代码
const dialog = new mdc.dialog.MDCDialog(document.querySelector('.mdc-dialog'));
dialog.open()
$("#delete-confirm").attr("data-number", $(this).data('number'))
});
}
}
}上面的代码通过获取所有具有类名 "btn" 的元素，然后遍历每个按钮并绑定单击事件。在过滤掉不需要的按钮后，添加一个单击事件处理程序，该处理程序实例化一个 MDCDialog 并调用其 open() 方法来打开对话框。
但是上面存在一个问题，我单击一个按钮或者出发另外一个事件，无法关闭 Dialog。
解决方法如下：
function deleteNumberAction() {
// 获取所有具有类名 "btn" 的元素
var buttons = document.getElementsByClassName("btn");
// 遍历每个按钮并绑定单击事件
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
if (button.id.startsWith("delete-number-")) { // 过滤掉不需要的按钮
button.addEventListener("click", function () {
// 在这里添加处理单击事件的代码
const dialog = new mdc.dialog.MDCDialog(document.querySelector('.mdc-dialog'));
dialog.open()
$("#delete-confirm").attr("data-number", $(this).data('number'))
// 在这里添加关闭对话框的代码
$('#close-dialog-btn').on('click', function() {
dialog.close();
});
});
}
}
}这里需要注意的是：重新打开 Dialog 之后，再次关闭，从效果来说的确没有问题。
在上面的示例中，我们添加了一个新的处理程序来捕获关闭对话框按钮的单击事件。在事件处理程序中，我们获取对话框实例并调用其 close() 方法以关闭对话框。
这样就解决了这个问题。
其它相关推荐：
评论列表