Sunday, April 12, 2009

dijit.Dialog's underlay

dijit.Dialogs are really handy for getting the user's attention. However, they can be a little intrusive if they're overused (think annoying JavaScript popups) as they take control away from the user.

Its always advisable to give the user a way out of the dialog. A cancel button, or the little x in the top right hand corner of the dialog should be visible at all times. For whatever reason though (more than likely my CSS skills suck), the little x at the top of the dialog box sometimes disappears behind a scroll bar in IE after I resize the dialog.

One escape route which should always be visible to the user is the underlying web page. Should they click on the underlay, you could interpret that interaction as the user wanting the dialog to disappear. Here's some dojo code I cooked up to allow that interaction to happen:


handleOverlayClick: function(dialogName) {
if(!this._dialogHandles) {
this._dialogHandles = new dojox.collections.Dictionary();
}
if(!this._dialogHandles.item(dialogName)) {
this._dialogHandles.add(dialogName, dojo.connect(dojo.byId(dialogName + "_underlay"), "onclick", dijit.byId(dialogName), "hide"));
dojo.connect(dijit.byId(dialogName), "hide", dojo.hitch(this, function() {
// cleanup
dojo.disconnect(this._dialogHandles.item(dialogName));
this._dialogHandles.remove(dialogName);
}));
}
}


Thanks to @phiggins on the dojo IRC channel for help with this.

1 comment:

  1. Seems pretty overdone.

    dojo.connect(dijit._underlay , "onClick", function(e){ theDialog.hide(); });

    ReplyDelete