jquery - 页面加载完成后首次打开时，Colorbox 弹出窗口未完全加载

Question

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

现在当我第一次点击“阅读更多”链接时，当页面刚加载时，中心新闻部分的任何新闻元素，弹出窗口(彩框弹出窗口)打开时缺少“下一步”按钮和“关闭”按钮。

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

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

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

下面是我正在使用的 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>

有人有什么建议吗？

Answer 1

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

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

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