nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Trouver plus de publications taguées avec

Accepted answers

RobertScheitlin__GISP

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

All comments

RyanSellman

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

Edit fiddle - JSFiddle

RobertScheitlin__GISP

Ryan,

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

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,

By default the dialog dijit is modal but you can add some css to hide the underlay.

Javascript:

&nbsp; var d = new Dialog({
&nbsp; 'title':'I am nonmodal',
&nbsp; 'class':'nonModal'
&nbsp; });

css:

.nonModal_underlay {
&nbsp; display:none
}

or just use a Floating Pane instead.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.