Dojo Dialog Question

[RyanSellman]

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

[RobertScheitlin__GISP]

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.

[RyanSellman]

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.

[RobertScheitlin__GISP]

Ryan,

  Where is that error coming from? It may be easier if you can share your whole code.

[RyanSellman]

Its not pretty, but here is the the app in jsfiddle:

Edit fiddle - JSFiddle

[RobertScheitlin__GISP · Accepted 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

[RyanSellman]

That's it!

Thanks so much for your help!