Colorbox代码在Umbraco之外工作，但不在其中

Question

我们是Umbraco的新手并在其中编码，所以我提前感谢您的耐心和帮助。

简而言之，我们使用彩色框弹出窗口创建了一个“测试”页面来显示表单。它在测试页面中完美运行。

当尝试将代码集成到Umbraco时，单击“请求信息”按钮时，表单将在整页中打开，并且颜色框不会显示。

我很感激您提供的任何帮助。

测试链接（工作）：

http://online.saintleo.edu/Colorbox/Untitled-1.html

“请求信息”按钮（右侧黄色）打开整页，而不是彩色框的页面示例：

http://online.saintleo.edu/academics/masters-programs/master-of-accounting-(macc).aspx

我花了整个周末试图找到解决方案，希望尽快解决这个问题。

提前感谢您，我感谢您的时间和帮助。

Answer 1

这看起来像是如何在Umbraco中实现脚本的问题。只需查看Chrome的浏览器检查器，我就可以看到您的脚本无法找到colorbox对象，这意味着某些东西阻止了库的可用性。这通常是因为依赖的JavaScript库失败了。

查看源代码，您将在页面底部加载所有jQuery库。这是一个很好的做法，但是您已经在页面的头部放置了第二个jQuery文件引用，颜色框文件引用和自定义颜色框代码。

您需要做几件事：

• 从页面开头删除jQuery引用;
• 在所有其他javascript文件引用之后，将colorbox文件引用移动到页面底部。您可以将colorbox CSS文件引用保留在头部。
• 将自定义颜色框代码移动到所有其他javascript文件引用之后。我通常将这种代码放在一个单独的文件中。

取决于您的Umbraco实施：

• 如果您使用的是高级页面，请使用ContentPlaceholder允许模板将javascript文件引用放到页面底部;
• 如果您使用的是MVC视图，请使用页脚section执行相同的操作