在地址栏中打开带有唯一 URL 的 Colorbox

Question

我有一个页面，当单击链接时会打开一个 Colorbox 弹出窗口。发生这种情况时，地址栏中的 URL 保持不变。我希望更改此 URL，以便我可以将访问者直接链接到 Colorbox 弹出窗口，而无需引导他们单击链接。此页面说明了我正在尝试完成的任务。

因此，当您查看URL位置栏时，您会看到上述URL。关闭弹出窗口时，URL 将更改为：http://www.uu.nl/daretoexcel/# 。同样，当您打开另一个窗口时，URL 将更改为类似的内容。所以我知道如何打开Colorbox，我让它工作。只是地址栏中的URL始终保持不变。

我看过他们的代码，但我不太明白。我不想只是复制和粘贴而不知道到底发生了什么。

Answer 1

你需要：

$(function() {
$.colorbox({html: "<h1>Welcome</h1>"});
})

这将在给定页面上打开 document.ready 上的 colorbox。您可能需要将一些类添加到要打开它的页面上的正文中，您可以通过在 url 中添加一个参数来添加类，例如/mypage.html？opencolorbox=true，然后使用 asp、php 或您使用的任何其他服务器端语言添加类。或者，只需让上面的脚本仅在颜色框应打开的页面上运行。

您也可以将其打开到 iframe，或显示内联内容，例如：

$(function() {
$.colorbox({href: "login.php"});
})

将显示登录名.php在颜色框中

$(function() {
$.colorbox({inline: true, href: "#form"});
})

将显示 ID 为 #form 的元素的内容

Answer 2

这比你想象的要简单，他们只是使用哈希。您可以在带有事件的彩盒网站上查看示例。像这样获取 href：如何从颜色框中获取返回值？，然后设置 hash： document.location.hash 并在关闭事件中删除哈希。