I am using Dojo 1.6.1 and I want to make it so my Dojo Dialog's can be closed by clicking outside of the dialog itself. After researching, it looks like one of the simpliest ways to acplish this is by doing something like this:

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();  
                }
            }
        }
    });
});

However, this doesn't work because dijit._underlay is ing back saying it is undefined. What am I missing to acplish this or is there an even easier way to do this?

UPDATE I updated the code which works, but it only works after I've called .show on one of my dialogs, then afterwords it is all gravy. It looks like the underlay isn't created until at least one dialog is shown.

I am using Dojo 1.6.1 and I want to make it so my Dojo Dialog's can be closed by clicking outside of the dialog itself. After researching, it looks like one of the simpliest ways to acplish this is by doing something like this:

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();  
                }
            }
        }
    });
});

However, this doesn't work because dijit._underlay is ing back saying it is undefined. What am I missing to acplish this or is there an even easier way to do this?

UPDATE I updated the code which works, but it only works after I've called .show on one of my dialogs, then afterwords it is all gravy. It looks like the underlay isn't created until at least one dialog is shown.

• javascript
• dialog
• dojo

• You might also try TooltipDialog. It's got a different UI, but the behavior is close to what you're looking for. – peller Commented Feb 10, 2012 at 4:06

2 Answers 2

I feel silly figuring it out this quickly. The trick is, dijit._underlay isn't initalized until you call a dialog's .show() for the first time. After that, it'll re-use the dijit._underlay. However, you can do that same trick right up front your self. So, I check to see if the dijit._underlay exists or not. However, if it isn't created I do it and all the dialogs will work off this one. So, here is the working code:

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();  
                }
            }
        }
    });
});

If you can open several dialog's, that mean they are nested and triggered by each others. But there is only one underlay that is repositioned (zIndex) everytime a new dialog is opened. It might be a good idea to use a controller type widget to "store" each dialog instance. Like a dialogList property in which you'll push the new Dialogs. And then onClick on the underlay, you hide dialogs starting by the last in the list. I think "order" is important when you try to hide them generically like you do. Hope this will help :)