Question

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

现在，当我点击＆＃34;阅读更多＆＃34;链接，首次加载页面时，中心新闻部分的任何新闻项目，弹出窗口（彩盒弹出窗口）打开，丢失＆＃34;下一个＆＃34;按钮和＆＃34;关闭＆＃34;按钮。

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

当我关闭弹出窗口然后第二次打开它时，它会在所有按钮上完全加载。

请检查页面来源以了解HTML，CSS和＆amp;为这个中间新闻部分加载了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问题。 HTML标记中存在close，next和previous按钮，但它们位于#cboxWrapper元素边界之外。 #cboxWrapper有overflow: hidden隐藏在其可见区域之外的任何内容。

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

您也可以尝试在width来电中为colorbox媒体资源设置更大的值。

Answer 2

看起来你的div有固定的高度。是否有可能某些类名被magento-styles覆盖？

另一个想法是尝试提取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

在页面加载完成后第一次打开时，Colorbox弹出窗口未完全加载

2 个答案: