MDialog.popupCustom(); 弹窗和灰色遮盖层如何关闭

Question

    // 显示就餐人数
    function NumberOfDiners()
    {
        // 显示遮盖层
        CoverShow();
        var _tmpHtml = "<div class='content' style='text-align:center;'><h2>一号桌</h2> ";

        _tmpHtml += "<div id='chosebox'>";
        _tmpHtml += "<h4 style='margin-top:15px;'>您好，请选择用餐人数</h4>";
        /*_tmpHtml += "<h6 style='margin-top:5px; color:#9296A1; '>将会按照您选择的用餐人数上餐具哦~</h6>";*/
        /*_tmpHtml += " <label for='female'style='margin-top:5px; color:#9296A1;  font-size:10px;'>将会按照您选择的用餐人数上餐具哦~</label>";*/
        _tmpHtml += "</div>";

        _tmpHtml += "<div class='hzw-city-picker' style='position: relative;'>";
        _tmpHtml += "<div class='hzw-hot-wrap' style='margin-top: 5px;'>";
        _tmpHtml += "<ul id='hzw_hot_city'>";
        _tmpHtml += "<li name='keypad_1' style='background-color: #F3F5F7; border-radius: 20px;height: 30px; line-height: 30px;' id='keypad_1' onclick='SelectKeypad(1)' > 1</li >";
        _tmpHtml += "<li name='keypad_2' style='background-color: #F3F5F7; border-radius: 20px;height: 30px; line-height: 30px;' id='keypad_2' onclick='SelectKeypad(2)' > 2</li >";
        _tmpHtml += "<li name='keypad_3' style='background-color: #F3F5F7; border-radius: 20px;height: 30px; line-height: 30px;' id='keypad_3' onclick='SelectKeypad(3)' > 3</li >";
        _tmpHtml += "<li name='keypad_4' style='background-color: #F3F5F7; border-radius: 20px;height: 30px; line-height: 30px;' id='keypad_4' onclick='SelectKeypad(4)' > 4</li >";
        _tmpHtml += "<li name='keypad_5' style='background-color: #F3F5F7; border-radius: 20px;height: 30px; line-height: 30px;' id='keypad_5' onclick='SelectKeypad(5)' > 5</li >";
        _tmpHtml += "<li name='keypad_6' style='background-color: #F3F5F7; border-radius: 20px;height: 30px; line-height: 30px;' id='keypad_6' onclick='SelectKeypad(6)' > 6</li >";
        _tmpHtml += "<li name='keypad_7' style='background-color: #F3F5F7; border-radius: 20px;height: 30px; line-height: 30px;' id='keypad_7' onclick='SelectKeypad(7)' > 7</li >";
        _tmpHtml += "<li name='keypad_8' style='background-color: #F3F5F7; border-radius: 20px;height: 30px; line-height: 30px;' id='keypad_8' onclick='SelectKeypad(8)' > 8</li >";
        _tmpHtml += "<li name='keypad_9' style='background-color: #F3F5F7; border-radius: 20px;height: 30px; line-height: 30px;' id='keypad_9' onclick='SelectKeypad(9)' > 9</li >";
        _tmpHtml += "<li name='keypad_10' style='background-color: #F3F5F7; border-radius: 20px;height: 30px; line-height: 30px;' id='keypad_10' onclick='SelectKeypad(10)' > 10</li >";
        _tmpHtml += "<li name='keypad_11' style='background-color: #F3F5F7; border-radius: 20px;height: 30px; line-height: 30px;' id='keypad_11' onclick='SelectKeypad(11)' > 11</li >";
        _tmpHtml += "<li name='keypad_12' style='background-color: #F3F5F7; border-radius: 20px;height: 30px; line-height: 30px;' id='keypad_12' onclick='SelectKeypad(12)' > 12</li >";
        _tmpHtml += "</ul >";
        _tmpHtml += "</div>";

        _tmpHtml += "<div id='searchdiv' style='width: 100%;margin: 4px auto;border-radius: 20px;text-align:center;'>";
        _tmpHtml += "<input name='customNumbers' id='customNumbers' style='text-align: center; border-radius: 20px; height: 35px; padding-left: 10px; padding-right: 18px; width: 90%; outline: none; border: 1px solid #e2e2e2; background: #F2F3F5' placeholder='自定义用餐人数'>";

        _tmpHtml += "</div>";
        _tmpHtml += "<a id='btnStartOrdering' class='startOrdering' href='javascript:void(0)' onclick='btnStartOrdering();'>开始点餐</a>";
        _tmpHtml += "</div>";
        _tmpHtml +="</div>"
        dialogInstance = MDialog.popupCustom(_tmpHtml, true, function () { }, true);
        // 隐藏遮盖层
        CoverHide();
    }

关闭弹窗代码

 // 开始点餐
    function btnStartOrdering()
    {  
        // 就餐人数放在 缓冲中
        var customNumbers = $("#customNumbers").val();

        if (customNumbers == "自定义用餐人数" || customNumbers == "") {
            alert("请选择用餐人数！");
            return;
        }

        setCookie("Food", "NumberOfDiners", customNumbers);

        // 就餐人数放在 隐藏文件中
        $("#lbNumberOfDiners").val(customNumbers);

        debugger;
        // 关闭当前就餐人数窗口
        if (dialogInstance) {

            dialogInstance.hidden = true; 
        }
    }

使用 dialogInstance.hidden = true; 窗口隐藏了，但是还是 有 灰色的 遮盖层。

Answer 1

引自免费微信小程序：皆我百晓生

从你提供的代码来看，MDialog.popupCustom() 函数用于创建一个自定义的弹窗，而你使用 dialogInstance.hidden = true; 来尝试关闭这个弹窗。然而，你发现虽然弹窗关闭了，但灰色的遮罩层仍然存在。

通常情况下，当一个弹窗库或框架创建弹窗时，它会同时创建一个遮罩层来覆盖在页面的其余部分，以阻止用户与背景元素交互。当弹窗关闭时，这个遮罩层也应该随之消失。

在你的代码中，CoverShow(); 和 CoverHide(); 这两个函数分别用于显示和隐藏遮罩层。但是，你只在弹窗打开时调用了 CoverShow();，而在关闭弹窗时没有调用相应的 CoverHide(); 函数。

为了确保遮罩层能够在弹窗关闭时也一起消失，你需要在关闭弹窗的逻辑中加入遮罩层的隐藏操作。你可以在 btnStartOrdering 函数中添加对 CoverHide(); 的调用，如下所示：

function btnStartOrdering()
{
    // ... 其他代码 ...

    // 关闭当前就餐人数窗口
    if (dialogInstance) {
        dialogInstance.hidden = true;
        CoverHide(); // 添加这行代码来隐藏遮罩层
    }
}

这样，每次弹窗关闭时，遮罩层也会被正确地隐藏。

如果你的 CoverHide(); 函数并未正确地移除遮罩层的DOM元素或者更改其样式使其不可见，你可能需要检查这个函数的实现。通常，遮罩层的隐藏可以通过将遮罩层的 display 样式属性设置为 none 或者移除遮罩层DOM元素来实现。如果遮罩层是通过CSS类控制显示和隐藏，确保 CoverHide(); 能够移除或切换正确的CSS类。