topic Re: Create modal window in ArcGIS JavaScript Maps SDK Questions

Create modal window

JohnDenis — Tue, 15 Aug 2017 20:33:09 GMT

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

Re: Create modal window

ChrisSmith7 — Tue, 15 Aug 2017 20:52:18 GMT

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

Re: Create modal window

JohnDenis — Wed, 16 Aug 2017 06:57:46 GMT

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

Re: Create modal window

KenBuja — Wed, 16 Aug 2017 11:55:33 GMT

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.

Re: Create modal window

JohnDenis — Fri, 18 Aug 2017 16:22:11 GMT

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

Re: Create modal window

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:50:17 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Create modal window

JohnDenis — Sat, 11 Dec 2021 08:50:20 GMT

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>‍‍‍‍

Re: Create modal window

RobertScheitlin__GISP — Mon, 21 Aug 2017 12:54:51 GMT

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.

Re: Create modal window

JohnDenis — Tue, 22 Aug 2017 07:30:32 GMT

Got it, thank you Robert

Re: Create modal window

scottmiller10 — Thu, 31 May 2018 15:47:47 GMT

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?

Re: Create modal window

RobertScheitlin__GISP — Thu, 31 May 2018 22:46:39 GMT

Scott,

I would have to see your code to get a feel for what is wrong.

Re: Create modal window

scottmiller10 — Thu, 31 May 2018 23:02:03 GMT

I've attached the widget.js and .html files. Thank you for your help!

Re: Create modal window

RobertScheitlin__GISP — Tue, 05 Jun 2018 14:11:35 GMT

Scott,

You should start a new thread in Web AppBuilder Custom Widgets‌ You code has many issues and a clean thread will enable me to go back and forth with you in the appropriate space.

Re: Create modal window

scottmiller10 — Tue, 05 Jun 2018 16:55:38 GMT

I just moved it to WAB custom widgets.