ColorBox 弹出窗口没有击中代码

Question

我正在使用ColorBox jQuery plugin，但遇到了一个奇怪的问题。以下是我的代码：

<script>
            $("#spv14DL").colorbox({width: "500px",
                                 height:"500px" });
</script>
...
<a href="/popups/spv14.aspx" id="spv14DL">Open this popup!</a><br />

当我点击链接时，一切都按预期打开。但是当我点击我在我的 aspx 页面上的一个按钮时，它永远不会点击我的 spv14.aspx 代码，它会重定向到 baseUrl.com/spv14.aspx 而不是 baseUrl.com/popups/spv14.aspx，这会导致 404 错误。

我做错了什么会导致这种行为吗？

Answer 1

该错误的原因是默认情况下，colorbox 插件使用异步GET 请求获取引用页面的内容并将其放入对话框容器中。因此，如果您在打开对话框时检查页面的标记，您会发现有一个引用页面的内容，其中包含form 元素和对话框容器中的所有控件。该表单的操作属性还引用了spv14.aspx 页面，没有任何根路径。实际上存在一些解决方案。让我们从最难到最简单来检查它们：

1. 您可以通过以下方式更改spv14.aspx页面的form元素的动作属性：action="\popups\spv14.aspx"。此解决方案的缺点是，在回发操作后，用户将被重定向到弹出页面。如果 IsPostback 属性返回 true 值：if(IsPostBack) { Response.Redirect(Request.UrlReferrer.ToString(), false); }，则可以使用弹出页面的 PreRender 方法中的 Response.Redirect 方法调用来修复此差距。在我看来，这个解决方案看起来不太好。
2. 您可以在弹出表单中单击提交按钮时取消回发，并使用异步请求弹出页面静态方法，将所有控件的值传递给您执行操作所需的值。我这样你就不能在服务器代码中使用页面的 ViewState 和控件属性。
3. 最后但并非最不重要的解决方案是在对话框元素容器中使用内联框架显示弹出页面，并将iframe: true 选项传递给彩盒插件。这是在对话框中使用所有 aspx 页面内容的最轻松方式。

结论：使用iframe选项的第三种方法是可用的最原生和最轻松的解决方案。

附：对不起我的英语:)