JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/resources/dojo.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dijit/themes/claro/claro.css">
<div id="navToolbar" data-dojo-type="dijit/Toolbar">
<div data-dojo-type="dijit/form/DropDownButton" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconBold', showLabel:false">
<div data-dojo-type="dijit/DropDownMenu">
<div data-dojo-type="dijit/MenuItem">
test1
</div>
<div data-dojo-type="dijit/MenuItem">
test2
</div>
</div>
</div>
<div data-dojo-type="dijit/form/DropDownButton" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconItalic', showLabel:false">
<div data-dojo-type="dijit/DropDownMenu">
<div id="d1MenuItem" data-dojo-type="dijit/MenuItem">
Show dialog 1
</div>
<div id="d2MenuItem" data-dojo-type="dijit/MenuItem">
Show dialog 2
</div>
</div>
</div>
</div>
<div id="dialog1" data-dojo-type="dijit/Dialog" title="Dialog 1" class="nonModal" autofocus=false>
<div>Test</div>
</div>
<div id="dialog2" data-dojo-type="dijit/Dialog" title="Dialog 2" class="nonModal" autofocus=false>
<div>Test</div>
</div>
CSS
.nonModal {
}
.nonModal_underlay {
display:none
}
JavaScript
//Show both dialogs under "I"
//Click on "I" again
//Flickering results
require(["dojo/parser", "dijit/registry", "dojo/ready"], function(parser, registry, ready) {
ready(function(){
registry.byId("d1MenuItem").on("click", function(){;
registry.byId("dialog1").show();
});
registry.byId("d2MenuItem").on("click", function(){;
registry.byId("dialog2").show();
});
});
});