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
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:
<SPAN class="operator token"><</SPAN>a href<SPAN class="operator token">=</SPAN><SPAN class="string token">""</SPAN> data<SPAN class="operator token">-</SPAN>toggle<SPAN class="operator token">=</SPAN><SPAN class="string token">"modal"</SPAN> data<SPAN class="operator token">-</SPAN>target<SPAN class="operator token">=</SPAN><SPAN class="string token">"#myModal"</SPAN><SPAN class="operator token">></SPAN>Open<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN></SPAN>
Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.
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?
Got it, thank you Robert
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:
<SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-body"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>p<SPAN class="operator token">></SPAN>Modal window<SPAN class="punctuation token">:</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>p<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>a href<SPAN class="operator token">=</SPAN><SPAN class="string token">"#myModal"</SPAN><SPAN class="operator token">></SPAN>Open<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Your button is behind the map based on the the applied css rules.
Add the css rules below to fix that.
<SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="selector token">html, body</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.btn-info</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">z-index</SPAN><SPAN class="punctuation token">:</SPAN> 3002<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> 100px<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
I am trying to use Bootstrap Modal but the button disappears abruptly after page load: JSBin code sample
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.
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?
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
Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
