2

我想创建/测试一个基于 colorbox 插件的简单弹出窗口。我有一个简单的可能的 html 页面，没有任何额外的 css，只有 jquery、colorbox 和 colorbox.css，但不知道为什么弹出窗口没有正确显示。你可以在这里试试这个页面http://goo.gl/VWQRC

点击问题登录后？链接我在 chrome 中得到这个 在此处输入图像描述

这是我的js代码

$(document).ready(function() {
    // Using a jQuery object:
    var $p = $("#reset-popup");
    $("#problem-link").colorbox({inline:true, href:$p});

});

我做错了什么？

4

3 回答 3

1

我发现我使用的是 jquery v1.4.2。那与彩盒不兼容。我使用了来自 jquery.com (v1.8.2) 的最新版本，现在它工作正常。您不需要在设置中设置弹出窗口的宽度。

于 2012-11-06T12:58:08.897 回答
1

尝试使用另一个 colorbox.css（甚至可能是另一个版本的 colorbox）。你的看起来是不同的版本或什么。您可以尝试使用chridam在他的示例中使用的样式和 JS（来自 v1.3.16）。

此外，它与样式没有任何共同之处，但这href:$p看起来是一个错误的代码。实际上，您根本不需要它，因为 colorbox 应该获取单击的链接 href 并找到您#reset-popup使用它。并且您提供了一个指向用 jquery 包装的 div 对象的链接，而不是带有链接/选择器的字符串。

正如我从测试页面中看到的那样，结果宽度为#cboxContent,#cboxTopCenter和的宽度#cboxBottomCenter相同#cboxWrapper，当它应该小于该宽度以便为#cboxMiddleLeftand留出空间时#cboxMiddleRight。如果我将这三个元素的宽度更改为更小的一个，我将得到几乎正确的颜色框。对我来说，该版本的颜色框​​似乎需要一些不同的样式。

于 2012-11-06T12:33:15.013 回答
1

尝试指定颜色框width选项，例如：

$(document).ready(function() {
    // Using a jQuery object:
    var $p = $("#reset-popup");
    $("#problem-link").colorbox({
          inline: true, 
          width: "50%",
          href: $p
    });
});

例如，这个标记包含内联调用的隐藏内容（#reset-popup）：

<div style='display:none'>
    <div id='reset-popup' style='padding:10px; background:#fff;'>
         <p><strong>This content comes from a hidden element on this page.</strong></p>                     
    </div>
</div>

演示：http: //jsfiddle.net/WGTVY/

于 2012-11-06T11:58:26.820 回答