1

我的测试站点：rockitmembers.us

网站是 Wordpress.org，不使用插件。

header.php 中的代码是：

<link rel="stylesheet" href="http://www.rockitmembers.us/wp-content/themes/acosmin-v3/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />

footer.php 中的这段代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.rockitmembers.us/wp-content/themes/acosmin-v3/fancybox/source/jquery.fancybox.pack.js"></script>
    <script>
    $(document).ready(function() {
    $(".iframe").fancybox({
       fitToView : false,
       autoSize : false,
       scrolling : 'no',
    maxWidth        : 820,
    maxHeight       : 600,
    width           : 800,
    height          : 600,
    type            : 'iframe'
        });
    });
    </script>

在我的 wordpress 帖子中，此代码用于购买许可证按钮：

<a href="http://www.rockitmembers.us/fancyboxtest.html" class="iframe rollover"><span class="displace">Buy A Beat</span></a>

单击第一篇文章（我的反思）上的购买许可证按钮。Fancybox 功能很好，只是它为 fancybox-lock 添加了 17px 的边距，这会弄乱背景的外观，我认为它会将滚动条推出？我不知道。当您在 Chrome 中检查它时，它会<body class="fancybox-lock" style="margin-right: 17px;">在单击购买许可证按钮时添加。

我尝试了这篇文章中的建议Jquery Fancybox 2 添加了边距，对吗？通过编辑 jquery.fancybox.css 并取出，overflow-y: scroll;但这仍然没有解决问题。

有任何想法吗？

4

2 回答 2

1

看起来它真的与Fancybox无关。看看你的实现，看起来你在每个“细节”部分的硬编码宽度都<ul>在推动 Fancybox 的边缘。您应该能够消除 中的大多数浮动cartstyles.css，然后您不需要在这些元素上指定宽度。

编辑：我不建议将此作为一种习惯，但如果唯一的抱怨是额外的边距，请尝试将此规则添加到您的样式表中：

.fancybox-lock{
    margin-right:0 !important;
}

!important覆盖正常的级联，并允许您覆盖 Fancybox 应用的内联样式。不过，它只会掩盖真正的问题。

于 2013-01-20T04:14:00.817 回答
1

这是我对同一问题的解决方案。在研究了几个答案之后，结合我的发现就可以了。在 jquery.fancybox.css 中，对覆盖帮助程序部分进行以下更改。

前

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
}

.fancybox-lock body {
    overflow: hidden !important;
}

.fancybox-lock-test {
    overflow-y: hidden !important;
}

.fancybox-overlay {
 position: absolute;
 top: 0;
 left: 0;
 overflow: hidden;
 display: none;
 z-index: 99999998010;
 background: url('fancybox_overlay.png');
}

.fancybox-overlay-fixed {
 position: fixed;
 bottom: 0;
 right: 0;
}

.fancybox-lock .fancybox-overlay {
 overflow: auto;
 overflow-y: scroll;
}

后 

.fancybox-lock {

}

.fancybox-lock body {

}

.fancybox-lock-test {

}

.fancybox-overlay {
 position: absolute;
 top: 0;
 left: 0;

 display: none;
 z-index: 99999998010;
 background: url('fancybox_overlay.png');
}

.fancybox-overlay-fixed {
 position: fixed;
 bottom: 0;
 right: 0;
}

.fancybox-lock .fancybox-overlay {

}
于 2014-12-15T15:31:43.040 回答