Create modal window

[JohnDenis]

Is it possible to create a modal window in ArcGIS for JavaScript 3.x ?

I couldn't find this information on GeoNet. 

I would like to create and access such a window from a panel: JS BIN code sample.

Thank you,

John

[ChrisSmith7]

John,

I have a mature app in 3.x that needed a modal. At the time, I decided to go with dijit/dialog:

dijit/Dialog — The Dojo Toolkit - Reference Guide 

If I were doing it now, I'd probably go with a Bootstrap modal:

Bootstrap Modals 

[JohnDenis]

Hi Chris, 

I am looking to create a modal page containing paragraphs and images for support purposes.

Also I was wondering if it could be moved in a separate file and have the code loaded only if someone clicks on the link. The reason is that there might be a lot of paragraphs & images that would unnecessary slow down the web app loading time.

Are these criteria achievable with bootstrap or dijit/Dialog?

Thank you,

John

[KenBuja]

Yes, I use a Dialog on my sites.  I don't have an example where it's a separate js file, but that shouldn't be difficult to do.

This site shows the Dialog upon loading, but can also be loaded when clicking on the question mark button.

[JohnDenis]

I am trying to use Bootstrap Modal but the button disappears abruptly after page load: JSBin code sample

[RobertScheitlin__GISP]

John,

  Your button is behind the map based on the the applied css rules.

Add the css rules below to fix that.

  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    .btn-info {
      position: absolute;
      z-index: 3002;
      top: 100px;
    }
  </style>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[JohnDenis]

Hi Robert,

I was sure it was a z-index issue but didn't thought using position:absolute  

Now it's working.

But you still can't open the modal window from the text link even though it is using the correct id:

<div class="panel-body">
  <p>Modal window:</p>
  <a href="#myModal">Open</a> 
</div>‍‍‍‍

[RobertScheitlin__GISP · Accepted solution]

John,

   You can not just use an anchor element with an href to the modal popup id. You need the bootstrap data attributes to make it work:

<a href="" data-toggle="modal" data-target="#myModal">Open</a>‍

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

[JohnDenis]

Got it, thank you Robert 

[scottmiller10]

Robert,

I am having a problem with the bootstrap modal as well. The open modal budget is on the widget, but when I click nothing happens. I've tried using the <a href...> as well the bootstrap button with data-toggle, but neither works. Do you have any idea what I could be missing?