使用dropdown按钮Dojo多个非模态对话框

Question

I am trying to have multiple dialogs on my page using dijit/Dialog . I want dialogs to be non-modal so I used this question as a guide to get rid of the background underlay.

However when I use a DropDownButton for toggling the windows I'm getting weird behavior. When one dialog is showing everything works fine. When both dialogs are showing the dropdownbuttons will flicker showing/hiding when clicked instead of just hiding

Here is the JSFiddle . To reproduce...

1. Show both dialogs under "I"
2. Click on "I" again

"I" will now flicker. Sometimes if you click on "B" with both dialogs showing it will fix itself. If both dialogs are closed the issue will be fixed.

I figured it had something to do with the z-index of the dialogs, but the DropDownButton seems to always have a higher z-index than the underlay and the dialog itself.

The other option is making my own FloatingPane but I'd like to see if this can work.

Answer 1

Might be a bit late, but could help others out.

The issue here is that the Dojo Dialogs do their best to keep themselves focused, to the point where when they lose focus, they call .focus() on themselves again ( See dijit/Dialog.js ).

As far as I can tell, there's no setting to disable this. However, you can always override the .focus() function for non-modal dialogs to do nothing instead. EG,

var dialog = registry.byId("myDialog");
dialog.focus = function() { };
dialog.show();