I'm having a problem with the Dialog dijit. I want to be able to show a Dialog box (or something similar) while giving the user the ability to use the map/application while the Dialog box is open. Right now, I have a button that opens a Dialog box, but the application behind the box becomes inactive. I don't know if this is even possible with the dialog dijit - I assume it is. Does anyone know what I am missing or have an alternative recommendation to achieve this?
Thanks!
Ryan
Solved! Go to Solution.
Ryan,
Well there was a few issue like using legacy naming in your dijit type "dijit.form.Button" vs "dijit/form/Button" and trying to have the onClick attribute on the button which made openLegend function out of scope.
Here is the working Fiddle
Ryan,
By default the dialog dijit is modal but you can add some css to hide the underlay.
Javascript:
var d = new Dialog({
'title':'I am nonmodal',
'class':'nonModal'
});
css:
.nonModal_underlay {
display:none
}
or just use a Floating Pane instead.
Robert,
Thanks for your response. Trying to get the Floating Pane to work but not having any luck. All I am trying to do is have a legend show up when the user clicks a button. Here is what I have so far:
My button:
<button id="openLegend" dojotype="dijit.form.Button" onClick="openLegend();">Show Legend<div dojoType="dojox.layout.Dock" id="dock" ></div> </button>
The FloatingPane HTML within my map panel div (which is the center region in border container):
<div id="floatingLegend" dojoType="dojox.layout.FloatingPane" title='Legend' dockTo="dock" style="visibility:hidden;" closable="false" resizable="true" dockable="true">
<div id="legendDiv"></div>
</div>
And the function I am using to show the pane, essentially changing is visibility:
function openLegend() {
var lp = dijit.byId('floatingLegend');
if (lp.style = "visibility: hidden;") {
lp.style.visibility="visible";
lp.show();
}
}
CSS:
#floatingLegend {
position: absolute;
top: 100px;
left: 175px;
width: 260px;
height: 140px;
z-index: 99;
}
#dock {
position:absolute;
border-style:hidden;
z-index: 99;
top: 28px;
right: 330px;
height: 0px;
width: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
visibility:hidden;
display:none;
}
Right now, when I click my button, I get an error saying, "object is not a function".
Any ideas as to why this isn't working for me?
Thanks for your help in advance.
Ryan,
Where is that error coming from? It may be easier if you can share your whole code.
Its not pretty, but here is the the app in jsfiddle:
Ryan,
Well there was a few issue like using legacy naming in your dijit type "dijit.form.Button" vs "dijit/form/Button" and trying to have the onClick attribute on the button which made openLegend function out of scope.
Here is the working Fiddle
That's it!
Thanks so much for your help!