Position Fancybox 2 manually

问题:

I can not for the life of me, figure out how I can reposition Fancybox 2 to use left: 47px; and top: 147px

I read through the source code, and without hacking it, I don't see a way to override the positioning.

Setting autoCenter to false only stops auto-centering after the first time it does it.

Using jQuery to change the CSS, or giving a custom wrapper to apply the CSS doesn't work either, because Fancybox always adds inline CSS which overwrites all my attempts.

Is there a way to tell Fancybox to stop positioning itself and to use my absolute positioning?

回答1:

You can override inline CSS styles using the !important modifier.

For the Fancybox use case the following will override the JavaScript positioning:

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

回答2:

I solved this problem by adding manually a new css-class in the beforeShow-Handler. I used 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; }); 

回答3:

I found this solution for fancybox2. You can override the default _getPosition method to prevent one or more dimensions being altered.

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

回答4:

Can't you change the css like so? Obviously changing the margin property to 'top' and 'left'

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

回答5:

I guess you can't change the css in that way, cause the fancybox core is editing the style property of #fancybox-wrap all the time. So you must add a new class, like in my example described. Otherwise you won't see any visuell changes.

回答6:

I have a similar problem -- I want to position a fancybox manually but it keeps re-centering automatically.

I solved it disabling the center function:

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

回答7:

Lucas Teixeira was right! This worked for me. First turn off center function then use onComplete event to set inline css as you wish.

   <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>    

文章来源: Position Fancybox 2 manually