Bootstrap - direct link to modal window

Question

Is it possible to have an url like this:

www.url.com/#imprint
(or similar) to link directly to the page with the opened modal window?

is this possible? Any hints?
Thank you!

Yes it is possible. But it depends on why and how you want to use link. — Khamidulla, Dec 18 '13 at 15:47
I just got a single prepage for some weeks and I need to link directly to my imprint from other services. But my Imprint is in a modal window on the prepage. That's why ;) — Marek123, Dec 18 '13 at 16:01

score 6 · Accepted Answer · answered Dec 18 '13 at 15:47

6

You might be able to do something like this.

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

answered Dec 18 '13 at 15:47

Jako

4,731
7
39
54

score 4 · Answer 2 · answered Sep 01 '15 at 22:49

Just for future visitors/readers, I have created a very simple function to open a modal dynamically without the need to know the exact ID that you're looking for. It just falls through if no hash is located.

/**
 * 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);

score 2 · Answer 3 · answered Dec 18 '13 at 15:48

2

Yes it is possible. Just check URL:

function popModal() {
      // code to pop up modal dialog
    }

    var hash = window.location.hash;
    if (hash.substring(1) == 'modal1') {
      popModal();
    }

answered Dec 18 '13 at 15:48

Norbert Pisz

3,392
3
27
42

score 1 · Answer 4 · edited Nov 21 '16 at 22:03

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

HTML | page-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 | page-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>

Bootstrap - direct link to modal window

4 Answers4