Create modal window

2074
13
Jump to solution
08-15-2017 01:33 PM
JohnDenis
New Contributor

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

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

0 Kudos
13 Replies
ChrisSmith7
Frequent Contributor

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
New Contributor

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

0 Kudos
KenBuja
MVP Honored Contributor

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
New Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor

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>

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

0 Kudos
JohnDenis
New Contributor

Got it, thank you Robert 

0 Kudos
scottmiller10
New Contributor II

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?

0 Kudos