Colorbox macht das Leuchtkasten beim Scrollen

Question

Ich arbeite mit jquery colorbox. Wenn der Seiteninhalt groß ist und colorbox geöffnet ist. Dann scrollte die Farbbox mit dem Seiteninhalt. Ich möchte, dass die Farbbox repariert werden muss, auch wenn der Hintergrundinhalt scrollt.

Bitte helfen Sie mir, dieses Problem zu beheben.

Answer 1

Puaka Ich ändere ein kleines Ding, das es funktioniert super machen. Es richtet das Zentrum perfekt aus.

die colorbox.css ändern

von

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} 

zu

#colorbox, #cboxOverlay{position:fixed; top:0; left:0; z-index:9999; overflow:hidden;} 
#cboxWrapper{} 

colorbox ist perfekt ausgerichtet.

Answer 2

versuchen Sie dies. ändern Sie die colorbox.css die erste CSS-Regel:

von

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} 

zu

#colorbox, #cboxOverlay {position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} 
#cboxWrapper { position:fixed; margin:0 auto; z-index:9999; overflow:hidden;} 

Answer 3

puaka Methode funktionierte nur, wenn ich den ganzen Weg nach oben gescrollt wurde. sonst würde die Box weiter unten erscheinen.

ich ersann eine andere Methode.

$("#btn").colorbox({width:"90%", height:"90%", iframe:true, scrolling:false, onOpen:function() { $("body").css("overflow", "hidden"); }, onClosed:function() { $("body").css("overflow", "auto"); }}); 

onOpen der Scrollbar Körper entfernen OnClosed die Scrollbar

Answer 4

Dieses ist für mich funktioniert noch besser ersetzen:

#colorbox, #cboxOverlay{position:fixed; top:0; left:0; z-index:9999; overflow:hidden;} 
#cboxWrapper{position:fixed;} 

Answer 5

basierend auf Bradaric Idee, müssen Sie

 posTop = Math.max(winHeight - settings.h - loadedHeight - interfaceHeight,0)/2 + $window.scrollTop(), 
     posLeft = Math.max(document.documentElement.clientWidth - settings.w - loadedWidth - interfaceWidth,0)/2 + $window.scrollLeft(); 

ändern

bis

 posTop = Math.max(winHeight - settings.h - loadedHeight - interfaceHeight,0)/2, 
     posLeft = Math.max(document.documentElement.clientWidth - settings.w - loadedWidth - interfaceWidth,0)/2; 

in der Positionsfunktion. (Funktioniert für mich)

Answer 6

posTop = Math.max(document.documentElement.clientHeight - settings.h - loadedHeight - interfaceHeight,0)/2, 
posLeft = Math.max($window.width() - settings.w - loadedWidth - interfaceWidth,0)/2; 

Answer 7

Hoffe das wird auch hilfreich sein.

$(document).ready(function() { 

    $('.div-container').colorbox({ 

     initialWidth:'550px', 
     initialHeight:'350px', 
     onComplete: function() { 
      // alert('window = ' + $(window).height()); 
      // alert('colorbox = ' + $('#colorbox').height()); 

      var window_height = $(window).height(); 
      var colorbox_height = $('#colorbox').height(); 
      var top_position = 0; 

      if(window_height > colorbox_height) { 
       top_position = (window_height - colorbox_height)/2; 
      } 

      // alert(top_position); 
      $('#colorbox').css({'top':top_position, 'position':'fixed'}); 
     } 
    }); 
}); 

Answer 8

Die CSS-Korrektur funktioniert über völlig in Ordnung für Mozilla und Chrome, aber in IE gibt es einige padding Problem, wenn das Ereignis stattfindet zwischen der Seite. U kann die Funktion erweitern, indem er Haken verwendet und den Überlauf beim Öffnen der Farbbox ausblenden. Beispiel:

$(document).ready(function(){ 

      $(document).bind('cbox_open', function(){ 
     $('body').css({overflow:'hidden'}) 
}); 
    }); 

der obige Code Stil Überlauf ergänzt: auf den Körper versteckt, wenn u die colorbox schließen Sie die Scroll finden dort nicht auf der Seite ist, so für, dass Sie diese Zeile in $ als auch hinzufügen sollen (Dokument) .ready (Funktion().

Answer 9

Ich glaube, dass die oben genannten Methoden sind nicht angepasst an Colorbox beim Scrollen behoben. Die folgende Methode habe ich auf allen Browsern getestet (IE7 und größer):

#colorbox, #cboxOverlay { 
    position:absolute; top:0; left:0; z-index:9999; 
    } 
#cboxWrapper {      
    position:fixed; top:50%; left:50%; 
    margin:-25% 0 0 -25%; /*margin default */ 
    z-index:9999; 
    }             

/* not overflow hidden share, Opera truncates everything else */ 

       $("a.cBox").colorbox({ 
       width:"500", 
       height:"400", 
       iframe:true, 
       onOpen: function() { 
       $('#cboxWrapper').css('margin','-200px 0 0 -250px'); 
       // margin adjusted - half the width and height minus margin top/left 
       } 
       }); 

Diese Methode funktioniert blendent

Answer 10

vielleicht alle diese Antworten sind von einer früheren Version von colorbox, aber die „feste“ Parameter ist jetzt ab Version 1.3.17 verfügbar:

$("a.item").colorbox({fixed:true}); 

kein Mucking mehr in der CSS erforderlich! Danke Colorbox Jungs!