页面加载完成后第一次打开时，颜色框弹出窗口未完全加载答案

【问题标题】：Colorbox popup not loading completely when opened for first time after pageload is complete页面加载完成后第一次打开时，颜色框弹出窗口未完全加载
【发布时间】：2016-10-15 06:56:51
【问题描述】：

我已设置默认 Magento CE 1.9.3.0，基本主题为 here 以及自定义新闻部分。

现在，当我单击“阅读更多”链接时，第一次加载页面时，中心新闻部分的任何新闻项目，弹出窗口（颜色框弹出窗口）打开时缺少“下一步”按钮和“关闭”按钮。

我认为这是由于弹出窗口的高度和宽度问题，但无法弄清楚为什么会出现此问题。

当我关闭弹出窗口然后第二次打开它时，所有按钮都可以正常加载。

请检查页面来源以了解为该中间新闻部分加载的 HTML、CSS 和 Javascript 库，因为由于未知原因，我无法创建小提琴。

下面是我正在使用的colorbox 和owl-carousel 脚本。

<script type="text/javascript">
//<![CDATA[
var $cnjQ = jQuery.noConflict();
$cnjQ(document).ready(function() {
    var $cnOwl = $cnjQ("#center_news");
    $cnOwl.owlCarousel({
        autoPlay: 2500,
        slideSpeed: 1500,
        loop:false,
        autoWidth:true,
        pagination: false,
        navigation: true,
        <?php echo $putTS ?>
        items: 1,
        itemsDesktop: [1199,1],
        itemsDesktopSmall: [979,1],
        itemsTablet: [768,1],
        itemsMobile: [600,1]
    });
    $cnjQ('.news-owlgrid').children().find('a.cn-read-more').each(function() {
        $cnjQ(this).colorbox({
            inline: true,
            width: "50%",
            rel: "cn-read-more",
            onLoad: function() {    
                $cnOwl.trigger('autoplay.stop.owl');
            },
            onClosed: function() {
                $cnOwl.trigger('autoplay.play.owl',[2000]);
            }
        });
    });
});
//]]>
</script>

有人有什么建议吗？

【问题讨论】：

我似乎找不到任何按钮。他们应该是什么样子？
下一个和上一个按钮/箭头，当弹出窗口第一次打开时，您可以看到 1 个按钮已经加载，但不是下一个和上一个，因为在弹出的当前幻灯片之前和之后都有幻灯片。
我在弹出窗口上看到关闭按钮，但在随后重新打开弹出窗口后看不到下一个或上一个按钮。此外，在检查弹出窗口时，我没有看到上一个或下一个按钮的 HTML 标记。看起来他们完全失踪了......
@jacefarm 我正在尝试其他选项，例如 Fancybox，现在我再次更改为 Colorbox，请清除您的浏览器历史记录并再次检查，相同的链接。
@VickyDev 您对我在下面提供的答案有何看法...？

标签： jquery html css magento colorbox

【解决方案1】：

这纯粹是一个 CSS 问题。 close、next 和 previous 按钮出现在 HTML 标记中，但它们位于 #cboxWrapper 元素的边界之外。 #cboxWrapper 具有 overflow: hidden 隐藏其可见区域之外的任何内容。

您需要通过更改应用于#cboxWrapper 的CSS 来扩展弹出窗口的可见边界，或者将close、next 和previous 按钮移动到其可见区域的边界内。

您也可以尝试在您的colorbox 调用中为width 属性设置一个更大的值。

【讨论】：

好吧，你可能明白了，但是为什么这个css问题只有在页面加载并且第一次打开弹出窗口时才会出现，为什么以后不出现呢？如果弹出窗口关闭并第二次打开，则根本不会发生此问题。所以我认为可能存在 Colorbox 故障，但不知道在哪里或如何修复它。
我也尝试了大多数与 Colorbox 加载相关的事件函数，但徒劳无功，第一次打开弹出窗口时，此问题一直出现。
@VickyDev 从样式表中的 CSS 中我可以看出，有多个样式属性会影响这些按钮的位置。也许从那里开始/简化？如果您的 CSS 选择器在特定性上更加精细，您应该能够覆盖 Colorbox 样式。
你能再检查一下吗？我已经从页面中删除了不必要的 CSS，现在只加载了 Magento 默认 css、Owl carousel css 和 Colorbox css，这是必要的，它们也是从单个 css 文件而不是不同文件加载的。仍然出现同样的问题，您也可以以代码（css / js）的形式提出建议，如何解决这个问题？仍然不清楚，为什么只有在第一次加载弹出窗口时才会出现这种情况，然后在弹出窗口关闭并重新打开时自行解决？
@VickyDev 所有父元素的宽度和高度约束，从#cboxWrapper 向下钻取到#cboxLoadedContent，都在约束可见区域。这些不应该被限制为 Colorbox 的开箱即用，因此，50% 的宽度设置是可疑的......

【解决方案2】：

看起来您的 div 具有固定的高度。是否有可能某些类名被 magento 样式覆盖？

另一个想法是尝试提取 Javascript 和 DOM-Code 并单独执行。如果还是不行，那就是代码有问题。

看起来这正是您的问题： Colorbox doesn't open at proper height when first opened 这看起来也相关： jquery colorbox looks wrong the first time opened and then fine after that

【讨论】：