Question

这真的很奇怪，似乎无法理解它。我有一个标题固定位置，所以它始终保持在屏幕的顶部，由于某种原因，这导致fancybox不能打开..这是我的代码：

CSS

 #header{background:#fff; width:100%; height:80px; margin:0; padding:0; position:fixed; top:0;}

fancybox jquery（最新版本2）：

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".various").fancybox({
            maxWidth    : 800,
            maxHeight   : 600,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none'
        });
    });
</script>

HTML

<div id="header">
    <div class="content">
    <img src="img/logo.png" align="left" alt="CSL Peru" />
    <div class="clear"></div>
    </div>    
</div>
    <!--end HEADER-->
<div id="container">
         <a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
    </div>

当我把“位置：固定”拿出来然后再次工作但是打破了我的整个设计..

Answer 1

当附加了fancybox时，请查看Firebug中的实际代码。它可能会为其中一个包装器添加#header id

Answer 2

这个问题现在有点老了，但在撰写本文时，我仍然遇到了问题，Fancybox版本为2.1.5。

有一个css *选择器可以在所有固定元素上应用一个类。

在jquery.fancybox.js的第1833行，您将找到以下代码：

$('*').filter(function(){
                    return ($(this).css('position') === 'fixed' && !$(this).hasClass("fancybox-overlay") && !$(this).hasClass("fancybox-wrap") );
                }).addClass('fancybox-margin');

注释掉这些行，你的布局应该没问题。

标题固定打破fancybox :(

2 个答案: