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
Solved! Go to 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.
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:
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
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.
I am trying to use Bootstrap Modal but the button disappears abruptly after page load: JSBin code sample
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>
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>
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.
Got it, thank you Robert
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?