javascript - 使用 # 打开基于 url 的模态

Question

当正确的片段在 URL 中时，我想显示两个模态，因此 domain.com#steg2 加载模态 #steg2 和 domain.com#steg3 加载模态#steg3。

我的脚本:

$(function() {
    if (window.location.hash.indexOf("steg2") !== -1) {
        $("#steg2").modal();
    }
    if (window.location.hash.indexOf("steg3") !== -1) {
        $("#steg3").modal();
    }
});

这就是我的模态框的构建方式:

<div class="modal fade" id="steg2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">


<div class="modal fade" id="steg3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

两种模式都在同一页面/URL 上。我究竟做错了什么？网站正在使用 bootstrap 3 和 jQuery。

Answer 1

经过一些试验，我发现这段代码可以完成这项工作:

<script type="text/javascript">
jQuery(document).ready(function($) {
var target = document.location.hash.replace("#", "");
if (target.length) {
if(target=="steg1"){
  $('#steg1').modal('show');
}
else if(target=="steg2"){
  $('#steg2').modal('show');
}
else if(target=="steg3"){
  $('#steg3').modal('show');
}
}
else{    
}
});
</script>