I'd like to use URLs with hashes to call specific Bootstrap modals. In other words, a user is on page1 and clicks on a link to page2#hash and the #hash modal loads when page2 loads. I've tried so many variations based on what I've read in other Q/As, but nothing has worked. I'm not at all experienced with JS, so I'd appreciate some help!

Here's what I have:

Link on page1: <a href="/page2#myModal>

HTML on page2:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
  ...
</div>

Javascript on page2:

<script>
  if(window.location.hash) {
    var hash = window.location.hash;
    $("'" + hash + "'").modal('toggle');
  }
</script>

Incidentally, <a href="#" data-toggle="modal" data-target="#myModal"> works just fine to call the modal when the user is actually on page2.

I'd like to use URLs with hashes to call specific Bootstrap modals. In other words, a user is on page1 and clicks on a link to page2#hash and the #hash modal loads when page2 loads. I've tried so many variations based on what I've read in other Q/As, but nothing has worked. I'm not at all experienced with JS, so I'd appreciate some help!

Here's what I have:

Link on page1: <a href="/page2#myModal>

HTML on page2:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
  ...
</div>

Javascript on page2:

<script>
  if(window.location.hash) {
    var hash = window.location.hash;
    $("'" + hash + "'").modal('toggle');
  }
</script>

Incidentally, <a href="#" data-toggle="modal" data-target="#myModal"> works just fine to call the modal when the user is actually on page2.

• javascript
• twitter-bootstrap
• bootstrap-modal

2 Answers 2

You are adding single quotes to your selector, selectors don't use quotes:

$("'" + hash + "'").modal('toggle');

should be

$(hash).modal('toggle');

Also you might not be waiting for the dom to be ready to use. If you do not have that script at the bottom of the page or at least below where your modal html is, it won't be found as it is not created yet.

<script>
  //shortcut for $(document).ready
  $(function(){
      if(window.location.hash) {
          var hash = window.location.hash;
          $(hash).modal('toggle');
      }
  });
</script>

$(document).ready(function () {
    $(window.location.hash).modal('show');
    $('a.open-modal-hash').click(function () {
        window.location.hash = $(this).attr('href');
    });

    $(".modal").on("hidden.bs.modal", function () { // any time a modal is hidden
        var urlReplace = window.location.toString().split('#', 1)[0];
        history.pushState(null, null, urlReplace); // push url without the hash as new history item
    });
});

/* Modal Full Screen */
.modal-full-screen {
    padding: 0 !important;
}
.modal-full-screen .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
}
.modal-full-screen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
}
.modal-full-screen .modal-body {
    overflow-y: auto;
}

<a href="#modal-hash" class="open-modal-hash" data-toggle="modal">Open Modal</a>

<div class="modal fade modal-full-screen" id="modal-hash">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6>Title</h6>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>