【发布时间】：2012-09-14 03:04:19
【问题描述】：
我正在尝试使用灯箱打开谷歌日历。我已经看到它在另一个网页上使用 Colorbox 完成（这里：http://www.orovalleybicycle.com/ 点击右侧的“扩展至完整日历”），但是当我尝试实现一些非常相似的东西（也使用 colorbox）时，日历拒绝在彩盒内打开。当我单击应该触发颜色框的超链接时，它只是导航离开我的页面并直接打开谷歌日历 URL。
所以基本上，这里是我的代码的相关位......我已经尝试尽可能复制演示页面上的内容（http://www.jacklmoore.com/colorbox/example1/），以便我知道它应该工作（除非你看到我的相对 URL实际上使用了绝对的，为了安全和简化而改变）：
在我的<head> 标签中：
<link rel="stylesheet" href="colorbox/colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".colorboxcal").colorbox({iframe:true, width:"80%", height:"80%", transition:"fade"});
});
</script>
在体内：
<a class="colorboxcal" href="https://www.google.com">Open Full Calendar</a>
但基本上，它的行为就好像它只是这样说：
<a href="https://www.google.com">Open Full Calendar</a>
我已经尝试了以下方法来找出导致问题的原因：
- 检查绝对路径是否正确
- 尝试将 jquery.min 的引用更改为我本地计算机上的副本，并尝试了不同的版本（没有区别）
- 尝试将“href”更改为指向我电脑上的图像（结果：单击链接在浏览器窗口中打开了图像，所以同样的老问题）
- 将 href 属性向上移动到顶部的
<script>代码中（结果：单击链接什么也没做。显示的光标错误，并且不像链接，只是文本。） - 将相同的代码放在测试页面中，除了基本要素之外什么都没有（结果：点击链接打开了 URL，所以同样的老问题。）
- 尝试删除所有覆盖 .colorbox 默认属性的属性，宽度和高度除外（结果：同样的老问题）
- 尝试删除
ready(function()内容并将<script>代码放在需要它的</a>标记下（结果：同样的旧问题）
我很想检查颜色框是否真的被触发或加载，但我不知道如何。
我已经检查过，我的页面可以很好地验证为 xhtml（使用 w3 和使用 dreamweaver），所以我不认为我有任何愚蠢的未封闭标签或任何导致问题的东西。但这可能是我忽略的同样明显的事情！我正在使用 php 来调用页眉和页脚和导航，并且我在网站的其他地方有一个图像“滑块”，它使用 javascript 和 jquery 并且工作正常。我已经尝试在 firefox 和 chrome 中查看它（本地托管），但两者的结果是相同的，所以我认为它与浏览器问题无关。我的 php 出现错误...被 xampp lite 解析（？那里的正确术语是什么？），但我用谷歌搜索并找不到任何预期的冲突。
我开始构建这个网站是作为一个完整的 html、php、javascript、jquery 新手 - 很多，所以如果你聪明的灵魂需要降低你的反应，我很抱歉......我是一个绝对的菜鸟，我的头是游泳的！ 但是有没有人（请！）对为什么颜色框不起作用有任何建议？？？ 提前谢谢你！
【问题讨论】：
-
发布有实际问题的网页。
-
它只在我的本地机器上，还没有在 www 上，很抱歉，我不能...
-
将其托管在您的测试站点上。调试你实际上看不到的东西是没有用的。
-
我正在为其他人构建它，所以他们正在整理事物的托管方面，所以还没有测试站点。对不起。不确定您需要从我没有给您的其余代码中获得什么信息？在我把它放进去之前，这一切都很好地工作，其余的继续工作，而彩盒仍然没有。这是一个非常简单的网站。