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>

来源：https://stackoverflow.com/questions/9932296/position-fancybox-2-manually

标签

jquery

fancybox