Question

174

Toggle Bootstrap modal with URL and hash

rated 0 times [ 181] [ 7] / answers: 1 / hits: 20150 / 10 Years ago, sat, july 26, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alejandro

Add To Favorites

Follow

Total Points: 231

Total Questions: 102

Total Answers: 107

Location: Jordan

Member since Wed, Jun 17, 2020

4 Years ago

alejandro questions

1 Discord.js v13 code breaks when upgrading to v14

Mon, Jul 18, 22, 00:00, 2 Years ago

1 React Image Magnifiers not working when zoom in using nextjs

Fri, Sep 18, 20, 00:00, 4 Years ago

1 Discord.js bot responds when mentioned

Thu, Sep 10, 20, 00:00, 4 Years ago

1 how to get input field value on button click in Vuejs or in vanila javascript?

Sun, Aug 9, 20, 00:00, 4 Years ago

1 How do I set a user's voice channel when I have the user's id?

Thu, May 21, 20, 00:00, 4 Years ago

View All

answered 10 Years ago feliciarainak · Accepted Answer

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>