topic Re: Dojo Dialog Question in ArcGIS JavaScript Maps SDK Questions

Dojo Dialog Question

RyanSellman — Wed, 29 Oct 2014 15:55:12 GMT

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

Re: Dojo Dialog Question

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:05:43 GMT

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.

Re: Dojo Dialog Question

RyanSellman — Wed, 29 Oct 2014 17:47:26 GMT

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.

Re: Dojo Dialog Question

RobertScheitlin__GISP — Wed, 29 Oct 2014 17:54:53 GMT

Ryan,

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

Re: Dojo Dialog Question

RyanSellman — Wed, 29 Oct 2014 18:03:13 GMT

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

Edit fiddle - JSFiddle

Re: Dojo Dialog Question

RobertScheitlin__GISP — Wed, 29 Oct 2014 19:02:49 GMT

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

Re: Dojo Dialog Question

RyanSellman — Wed, 29 Oct 2014 19:09:05 GMT

That's it!

Thanks so much for your help!