时间戳

首页 > 解决方案 > 在浏览器搜索中显示引导模式链接

javascript - 在浏览器搜索中显示引导模式链接

问题描述

我正在使用带有 href 标签的引导卡，因此用户可以单击它们并打开引导模式。我希望他们能够从顶部复制模态的 url 链接，以便他们可以共享它。问题是如果我打开模式，url 不会改变。我怎样才能改变它？例如我有这个网站：

example.com/index.php

当有人点击卡片时，我想向他展示：

example.com/index.php#modal-1

这是我的href链接：

<a href="#" data-toggle="modal" data-target="#modal-<?php echo $row['id']; ?>">
<div class="card">...</div>
</a>

和模态：

 <div class="modal full" id="modal-<?php echo $row['id']; ?>" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">...</div>

编辑：我使用引导程序 4

标签： javascripthtmljquerybootstrap-4

解决方案

您可以使用哈希切换模式。

如果您的用户访问 example.com/index.php#modal-1 并且您的网站上有以下代码段，则该模式将在文档加载后打开。

文档：https ://getbootstrap.com/docs/4.0/components/modal/#modaltoggle

$(document).ready(function () {
  var hash = window.location.hash; // #modal-1
  $(hash).modal('toggle');
});

如果要更新地址栏中的 URL，可以使用引导自定义事件来触发此操作。通常使用 .modal 类并从事件对象中获取模式的 id。

文档：https ://getbootstrap.com/docs/4.0/components/modal/#events

$(document).on('show.bs.modal', ".modal", function(event) {
  window.location.hash = event.currentTarget.id;
});

推荐阅读