colorbox无法正确显示内容

Question

我想基于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});

});

我做错了什么？

Answer 1

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

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

E.g。此标记包含内联调用的隐藏内容（#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>

DEMO ：http://jsfiddle.net/WGTVY/

Answer 2

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

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

正如我从测试页面看到的#cboxContent宽度，#cboxTopCenter和#cboxBottomCenter与#cboxWrapper的宽度相同，当它应该小于#cboxMiddleLeft时为#cboxMiddleRight和{{1}}留出空格。如果我将这三个元素的宽度更改为更小的元素，我将得到几乎正确的颜色框。对我来说，这个版本的colorbox看起来有些不同的风格。

Answer 3

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