点击对话框外部关闭Dojo对话框

Question

我正在使用Dojo 1.6.1，希望能够使得Dojo对话框可以通过点击对话框外部来关闭。经过研究，看起来最简单的方法之一是这样做：

var dij = dijit._underlay.domNode;
dojo.connect(dij, "onclick", function(e) { 
    dojo.query('[role="dialog"]').forEach(function(element) {
        if (element.className.match("dijit")) {
            if(element.id)
            {
                var widget = dijit.byId(element.id);
                if(widget._isShown() === true)
                {
                    widget.hide();  
                }
            }
        }
    });
});

然而，这样做不起作用，因为dijit._underlay返回值表示未定义。我缺少什么来完成这个过程？或者，有更简单的方法吗？

更新：我已经更新了代码，现在它可以工作了。但是只有在我调用一个对话框的.show方法之后，它才能正常工作。看起来，在至少显示一个对话框之前，底层元素都没有被创建。

- Nick Jaross

---

你也可以尝试使用TooltipDialog。它的用户界面不同，但行为与你所寻找的相似。 - peller

Answer 1

我觉得自己很傻，这么快就想出了解决办法。窍门在于，直到您第一次调用对话框的.show()之前，dijit._underlay才会被初始化。之后，它将重复使用dijit._underlay。但是，您可以在最前面做同样的技巧。因此，我检查dijit._underlay是否存在。但是，如果它还没有被创建，我会创建它，所有对话框都将使用它。所以，以下是可行的代码：

var dij = null;
if(dijit._underlay === undefined)
{
    dijit._underlay = new dijit.DialogUnderlay();
}
dij = dijit._underlay.domNode;
dojo.connect(dij, "onclick", function(e) { 
    dojo.query('[role="dialog"]').forEach(function(element) {
        if (element.className.match("dijit")) {
            if(element.id)
            {
                var widget = dijit.byId(element.id);
                if(widget._isShown() === true)
                {
                    widget.hide();  
                }
            }
        }
    });
});

- Nick Jaross

Answer 2

如果您可以打开多个对话框，那么它们是嵌套的，并且由彼此触发。但只有一个底层，每次打开新对话框时都会重新定位（zIndex）。 使用控制器类型小部件来“存储”每个对话框实例可能是一个好主意，例如在其中推送新对话框的对话框列表属性。然后，在单击底层时，您将隐藏从列表中最后一个开始的对话框。 我认为，在尝试像你一样通用地隐藏它们时，“顺序”很重要。 希望这会有所帮助 :)

- PEM

---

谢谢您的建议！我更新了我的问题，包括我发现的更多信息。 - Nick Jaross