使用URL和哈希切换Bootstrap模式

Question

我想使用带哈希的URL来调用特定的Bootstrap模式.换句话说,用户在page1上并点击指向page2 #hash的链接,并在加载page2时加载#hash模态.我已经根据我在其他Q/As中读到的内容尝试了很多变化,但没有任何效果.我对JS没有任何经验,所以我很感激一些帮助!

这就是我所拥有的:

第1页上的链接: <a href="/page2#myModal>

第2页上的HTML:

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

第2页的Javascript:

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

顺便提一下,<a href="#" data-toggle="modal" data-target="#myModal">当用户实际上在第2页时,可以正常调用模态.

Answer 1

您正在向选择器添加单引号,选择器不使用引号:

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

应该

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

你也可能不会等待dom准备好使用.如果您在页面底部没有该脚本,或者至少在模式html的下方,则无法找到它,因为它尚未创建.

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