位置的fancybox 2手动

问题描述：

我不能为我的生命，找出我如何可以重新定位的fancybox 2使用left: 47px;和top: 147px位置的fancybox 2手动

我通过源代码阅读，无盗号的，我不明白一种覆盖定位的方式。

将autoCenter设置为false只会在第一次停止自动对中后停止自动对中。

使用jQuery来改变CSS，或者给一个自定义的包装器来应用CSS也不起作用，因为Fancybox总是添加内联CSS来覆盖我所有的尝试。

有没有办法告诉Fancybox停止自己定位并使用我的绝对定位？

你可以用记录不完整的'helpers：'选项来做。如果我能找到确切的代码，我会将它作为答案发布。 – Sparky 2012-03-29 19:52:54

我没有找到任何东西。我不认为你想做的是一个没有编辑插件源代码的选项。如果你打算这样做，那么你可以简单地添加额外的定位选项，以便至少该插件保持可扩展性。 – Sparky 2012-03-29 20:08:57

答

您可以使用!important修饰符0123'样式。

对于使用的fancybox情况下，下面将覆盖JavaScript的定位：

.fancybox-wrap { 
    top: 147px !important; 
    left: 47px !important; 
}

被Fancybox 2使用jQuery的css（）注入的内联CSS覆盖。 – bafromca 2012-03-29 19:59:50

这很奇怪 - '！重要'应该重写任何内联样式，包括使用'css（）'设置的样式 - 请参阅http://jsfiddle.net/YKhEG/ - 也许'＃fancybox-wrap'是错误的选择器？ – leepowers 2012-03-29 20:12:51

就是这样：它是.fancybox-wrap。你是对的，这就是我所需要的。谢谢！ – bafromca 2012-03-29 20:39:28

答

不能更改CSS像这样？显然改变margin属性来“顶”和“左”

$("a.fancybox1").fancybox({ 
'hideOnContentClick': false, 
     'onComplete' : function() { 
      $("#fancybox-wrap").css('margin', 'auto'); 
     } 
    });

答

我通过手动添加一个新的CSS类的beforeShow处理程序解决了这个问题。我用fancybox2。

CSS：

.fancybox-wrap22 { 
    top: 22% !important; 
}

JS：

$(".open_fancybox").click(function() { 
    $.fancybox.open('<h1>lorem ipsum</h1>', { 
    beforeShow : function() { 
     $('.fancybox-wrap').addClass('fancybox-wrap22'); 
    } 
    }); 
    return false; 
});

答

我想你不能改变的CSS以这种方式，引起的fancybox核心是所有编辑＃的fancybox外包装的样式属性时间。所以你必须添加一个新的类，就像我之前描述的例子。否则，您将看不到任何视觉改变。

答

我有类似的问题 - 我想手动定位fancybox，但它会自动重新居中。

我解决它禁用中心功能：

$.fancybox.center = function(){};

答

我发现这个解决方案fancybox2。您可以覆盖默认的_getPosition方法以防止更改一个或多个维度。

// Disable vertical repositioning 
var orig = $.fancybox._getPosition; 
$.extend($.fancybox, { 
    _getPosition: function(onlyAbsolute) { 
     var rez = orig(onlyAbsolute); 
     delete rez.top; 
     return rez; 
    } 
});

这是一个不错的解决方案。你如何得到这个将fancybox放在触发器元素的顶部，并稍微向右偏移20px？你的代码示例中'onlyAbsolute'是什么意思？ – 2015-06-15 21:44:26

答

卢卡斯特谢拉是对的！这对我有效。首先关闭中心函数，然后使用onComplete事件来设置内联CSS。

<script> 
     jQuery(document).ready(function() { 

      //turn off center function 
      $.fancybox.center = function() { }; 

      //use onComplete event to modify inline css 
      $("#ModalPopup").fancybox({ 
       'modal': true, 
       'onComplete': function() { 
        $("#fancybox-wrap").css({ 'left': '250px', 'top': '150px' }); 
       } 
      }); 

     }); 
    </script>

位置的fancybox 2手动

相关推荐