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>

Answer 2

$(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>

使用URL和哈希切换Bootstrap模式

2 个答案: