Question

I have two ‘nested’ or ‘cascaded’ dialogs on my web page (one dialog opens another dialog on top of it), and i’m encountering problems when trying to close the ‘topmost’ dialog.

Here is the scenario:

1. Dialog 1 is opened
2. Dialog 2 is opened from a button inside of Dialog 1

3. Dialog 2 is closed on a button click with the following code:

   dialog2.hide();
   dialog2.destroyRecursive();

4. Problems happen.

‘Problems’ are defined as the ‘modality’ (as in, a dialog is modal) is lost for dialog 2 (meaning you can now interact with dialog 1), AND is lost for dialog 1 (meaning you can interact with the page behind the dialog), but dialog 1 is still there.

Interestingly, this problem does not show itself when you use the X in the top-right corner to close the dialog. Is there a * better * way to close the dialog?

EDIT: I’m using dojo 1.5

Answer 1

I have nested dialogs working with no prob with 1.5.

Try skipping the destroyRecursive() call or changing it to destroy() to see if there are any differences.

Also, are you calling hide() inside your click handler? Try setting up a timer to call hide() after the handler returns. I remember that calling hide for a dialog inside a handler sometimes screw things up.

By what you mean “losing modality”, what really happens is that the dialog underlay got hidden. The underlay is a DIV (ok, a div within a div) linked to the class dijit.DialogUnderlay and the div is usually shown upon dijig.Dialog.show and hidden when upon hide. The div covers the entire screen area, which is what provides the “modality”.

You should also go into your favorite web developer tool (Firebug or WebKit/IE’s dev tools) to check on this underlay div. It should be at the very end of your body. See if it is hidden.