Dojo Dialog Question

1052
6
Jump to solution
10-29-2014 08:55 AM
RyanSellman
Occasional Contributor II

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

View solution in original post

6 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
Occasional Contributor II

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Ryan,

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

0 Kudos
RyanSellman
Occasional Contributor II

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

Edit fiddle - JSFiddle

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

View solution in original post

RyanSellman
Occasional Contributor II

That's it!

Thanks so much for your help!

0 Kudos