我以前曾经成功使用过fancybox,但是在我的最新设计中,fancybox导致出现滚动条,即单击图像,图像显示在窗口的中间,而窗口本身则获得了滚动条。 当更改窗口大小或字体大小时,我的布局流畅并且可以调整。 然后,使用fancybox,整个页面会在没有明显原因的情况下移动和重新缩放,这看起来很糟糕,而且还使用了处理器功能。

这可能是什么原因?

而且,背景也不会变暗... fancybox通常会做什么以实现此目的,为什么我的设计会失败?

以下是一些代码段:

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$('.fancybox').fancybox();
});
</script>

<div id="wrapper">
<div id="classes" class="post">
<h2>料理教室・ワークショップ</h2>
<a class="fancybox" rel="classes" href="http://127.0.0.1/wordpress/wp-content/themes/hitomiskuche/images/classes/1.jpg">フォトス</a>
<a class="fancybox" rel="classes" href="http://127.0.0.1/wordpress/wp-content/themes/hitomiskuche/images/classes/2.jpg"></a>
<a class="fancybox" rel="classes" href="http://127.0.0.1/wordpress/wp-content/themes/hitomiskuche/images/classes/3.jpg"></a>
</div>
</div>

#classes {
    width:40%;
    position:absolute;
    left:5%;
    bottom:10%;
    background-color:#fff;
    padding:1em;
    opacity:0.65;
    box-shadow:2px 2px 3px #555;
}

===============>>#1 票数:5

尝试这个:

$(".fancybox").fancybox({
    helpers : {
        overlay : {
            locked : false
        }
    }
});

而且,如果您使用的是“超大尺寸”之类的全屏背景,则可能要将其也添加到页面的CSS中:

html {overflow: -moz-scrollbars-vertical; overflow: scroll;}

===============>>#2 票数:1

正如Rob和Eva回答的那样,将帮助程序代码添加到Java脚本中conf对我有用

这是我的完整代码

        $(document).ready(function() {
            $(".fancybox").fancybox({
                maxWidth        : 800,
                maxHeight   : 500,
                fitToView       : true,
                width       : '100%',
                height      : '100%',
                autoSize        : true,
                closeClick      : true,
                openEffect  : 'elastic',
                closeEffect : 'elastic',
                helpers : {
                overlay : {
                    locked : false
                }
            }

            });
        });

===============>>#3 票数:-1

Fancybox使用类fancybox-overlay来显示叠加层:

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

overflow-y:scroll属性使滚动条出现。 把它拿出来,你会被分类。

此外,你可能没有包括fancybox_overlay.png在同一文件夹中的fancybox css文件。 覆盖背景是从该文件创建的。 希望这些信息对您有所帮助

  ask by translate from so

未解决问题?本站智能推荐:

1回复

没有花式框滚动条

我对fancybox滚动条有问题。 Fancybox仅使用浏览器滚动条。 我需要fancybox弹出窗口中fancybox和滚动条的固定高度。 http://prntscr.com/4hgcci 我的html页面:
2回复

在chrome和safari中显示的Fancybox滚动条不是Firefox?

我正在使用此页面上的精美框http://kimcolemanprojects.com/django_django.html 当您单击显示视频的链接时,它会显示我不想出现的滚动条。 似乎该元素已被赋予溢出的样式:自动,但是我找不到在哪里声明以对其进行更改。 顺便说一句,这发生在Safar
3回复

fancybox-2水平滚动条关闭

fancybox版本2 #fancybox-inner任何原因均显示#fancybox-inner水平滚动条。 甚至我更改了显示滚动条的框的大小。 如何隐藏水平滚动条? 我试过$("#fancybox-frame").css({'overflow-x':'hidden'}); 还是行不通。
2回复

删除或隐藏Fancybox 2.1.5中的垂直滚动条

在以下示例页面上使用FancyBox 2.1.5查看图片时,我想删除或隐藏灰色垂直滚动条: http://fancyboxtest.co.nf/ 我已经尝试了几乎所有在Google上找到的解决方案,结果均为零,任何人都可以帮忙...
1回复

动态滚动条中的fancybox图像和文本

我在jquery中使用一个名为Simplyscroll.js的插件制作了滚动器。 在其中,我滚动使用数据库在运行时加载的许多图像。 我想在每个图像上应用一个带有数据库加载的文本的图像的花式框:(我要加载的文本在$img['txt'] )代码:
24回复

jQuery - Fancybox:但我不想要滚动条!

我使用jQuery的fancybox一个弹出报名表这里 我希望表单的大小为450px×700px,但无论我设置高度和宽度,我都会得到滚动条: 必须有一些我做错了但我无法弄清楚它是什么。 我很感激这里有用的手。 谢谢。
4回复

Fancybox 2.1.3阻止iframe滚动条

我正在使用fancybox.js版本2.1.3将外部内容放入iframe。 我这样做是通过在URL后面加上div ID(例如http://somesite.com#about )来完成的,这似乎可行,但是问题是我还没有找到阻止fancybox滚动的方法。 防止滚动是必要的,因为我将在同一个外
6回复

Fancybox 2滚动条消失,站点向右移动

我对fancybox 2有一个小问题。现在我要谈编码工作,如果对不起,我想问个问题。 我在测试站点上使用了fancybox,但是当我单击图像时,将打开该框,并且背景中的整个页面都向右移动,并且滚动条消失了。 我不要这种行为。 滚动条应该在那里。 它在此站点上: http : //
8回复

当激活fancybox 2时,父页面上的滚动条会闪烁,导致内容向左移动然后向后移动

任何想法如何解决滚动条问题? 每当在我的网站上激活fancybox时,它会在初始化时创建一个滚动条,然后再次闪烁 - 但这会将整个页面移动一瞬间。 不是很优雅! 这是Fancybox 2的错误吗? 用于激活Fancybox的代码:
1回复

fancybox滚动条未在iPad上显示,但在浏览器中显示

我有一个页面,其中fancybox中的滚动条不是从iPad显示的,而是从Google Chrome从桌面显示的。URL是http://jsfiddle.net/wqm0x21n/1/您可以滚动fancybox的内容,但是没有垂直方向从iPad访问时滚动条。 有什么想法使它起作用吗? 以S