使用 URL 和哈希切换引导模式

Posted 2023-02-22

【中文标题】使用 URL 和哈希切换引导模式

【英文标题】：Toggle Bootstrap modal with URL and hash

【发布时间】：2014-09-18 00:24:16

【问题描述】：

我想使用带有哈希的 URL 来调用特定的 Bootstrap 模式。换句话说，用户在 page1 上并单击指向 page2#hash 的链接，并且在 page2 加载时加载 #hash 模式。根据我在其他问答中阅读的内容，我尝试了很多变化，但没有任何效果。我对 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"> 在用户实际在 page2 上时可以很好地调用模式。

【参考方案1】：

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

【参考方案2】：

您正在向选择器添加单引号，选择器不使用引号：

$("'" + 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>

【讨论】：

谢谢，帕特里克。我把js移到页面底部，把我的js换成你的，还是不行。不知道为什么...

您的控制台是否出现错误？或者您有可以查看的实时示例吗？

知道了！控制台显示“Uncaught TypeError: undefined is not a function”，它引用了 $(hash).modal('toggle'); 行。所以我做了一些挖掘并将我们的 jquery 从 1.11.1 更改为 2.1.1。然后你提供的代码工作！非常感谢，帕特里克。

请注意，使用 2.x 系列不支持旧版浏览器（仅提及以防万一您必须支持它们）。您用于 1.11.1 的网址可能是错误的（网址中的拼写错误等）。

你说得对。我们最初从 Bootstrap 的基本模板中复制了 jQuery 链接，但它不起作用。但是，我刚刚返回并直接从 Google 的托管库页面复制了 1.11.1 的链接，并且 确实 工作。钱。