在地址栏中使用唯一 URL 打开 Colorbox

Question

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

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

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

Answer 1

你需要：

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

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

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

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

会在颜色框中显示 login.php

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

会显示id为#form的元素的内容

Answer 2

这比你想象的要简单，他们只是使用哈希。您可以查看带有事件的彩盒网站上的示例。像这样获取href：How do you get a return value from a colorbox?，然后设置哈希：document.location.hash，并在关闭事件时删除哈希。