Geek Answers Handbook

Bootstrap - direct link to a modal window

Is it possible to have a URL like this:

www.url.com/#imprint
(or similar) for a direct link to a page with an open modal window?

Is it possible? Any clues?
Thanks!

+6
source share
4 answers

You might be able to do something like this.

 if (window.location.hash == "#imprint") { $('#myModal').modal('show'); }
+6
source

Yes it is possible. Just check the url:

 function popModal() { // code to pop up modal dialog } var hash = window.location.hash; if (hash.substring(1) == 'modal1') { popModal(); }
+2
source

Just for future visitors / readers, I created a very simple function to dynamically open the modality without having to know the exact identifier you are looking for. It just fails if there is no hash.

 /** * Function to open a bootstrap modal based on ID * @param int */ function directLinkModal(hash) { $(hash).modal('show'); } /** * Call the function on window load * @param hash of the window */ directLinkModal(window.location.hash);
+2
source

After losing a couple of hours, I came up with this one. Solution for opening different modals on page-2 based on the link that page-1 is clicked on . HTML is based on official Bootstrap Modal examples.

HTML | str-1.html

 <body> <a href="http://yourwebsi.te/page-2.html?showmodal=1"> <a href="http://yourwebsi.te/page-2.html?showmodal=2"> </body>

Js | ShowModal.js

 $(document).ready(function() { var url = window.location.href; if (url.indexOf('?showmodal=1') != -1) { $("#modal-1").modal('show'); } if (url.indexOf('?showmodal=2') != -1) { $("#modal-2").modal('show'); } });

HTML | str-2.html

 <body> <div class="modal fade bd-example-modal-lg" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content">Your content</div> </div> </div> <div class="modal fade bd-example-modal-lg" id="modal-2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content">Your content</div> </div> </div> <script src="ShowModal.js"></script> </body>
+1
source

More articles:


All Articles