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

Question

我在这里设置了带有基本主题的默认Magento CE 1.9.3.0以及自定义新闻部分。

现在，当我单击"阅读更多"链接时，第一次刚刚加载页面，中心新闻部分的任何新闻项，弹出窗口(colorbox弹出窗口(打开，缺少"下一步"按钮和"关闭"按钮。

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

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

请检查页面的来源，以了解为中间新闻部分加载的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>

有人有任何建议吗？

Answer 1

这

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

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

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

Answer 2

看起来你的div 有固定的高度。是否有可能某些类名被洋红色样式覆盖？

另一个想法是尝试提取Javascript和DOM-Code并单独执行。如果它不起作用，那么这是代码的问题。

看起来这正是您的问题：首次打开时，颜色框无法以适当的高度打开这看起来也相关：jQuery Colorbox第一次打开时看起来不对，然后很好