Colorbox hace que la caja de luz se repare cuando se desplaza

Question

Trabajo con jquery colorbox. Cuando el contenido de la página es grande y se abre el cuadro de color. Luego, el cuadro de color se desplazó junto con el contenido de la página. Quiero que el colorbox se corrija, incluso el contenido de fondo se desplaza.

Por favor, me ayudan a solucionar este problema.

Answer 1

Puaka estoy cambiando una pequeña cosa, que hacen que funciona increíble. Alinea el centro perfectamente.

Cambiar el colorbox.css

de

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

a

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

colorbox está perfectamente alineado.

Answer 2

prueba esto. cambiar el colorbox.css la primera regla CSS:

de

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

a

#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

El método puaka solo funcionó si me desplazaban hasta la parte superior. si no, el cuadro aparecerá más abajo.

ideé otro método.

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

onOpen quitar la barra de desplazamiento del cuerpo onClosed sustituir la barra de desplazamiento

Answer 4

Esta funciona aún mejor para mí:

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

Answer 5

basado en la idea Bradaric, es posible que tenga que cambiar

 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(); 

a

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

en la función de posición. (Funciona para mí)

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

Espero que esto también sea útil.

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

La solución css anterior funciona perfectamente bien para Mozilla y Chrome, pero en IE se da algún problema de carnes de si el evento tiene lugar en medio de la página. U puede extender la función usando ganchos y ocultar el desbordamiento cuando se abre el colorbox. Ejemplo:

$(document).ready(function(){ 

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

el código anterior añade desbordamiento estilo: oculto en el cuerpo, si u cerrar la caja de colores es posible que el desplazamiento no está allí en la página, así que para eso se debe añadir esta línea, así como en $ (documento). listo (función().

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

Answer 9

Creo que los métodos anteriores no se ajustan a Colorbox fijo cuando se desplaza. El siguiente método, he probado en todos los navegadores (Internet Explorer 7 y más grande):

#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 
       } 
       }); 

Este método funciona blendent

Answer 10

quizás todas estas respuestas son de una versión anterior de la caja de colores, pero el "fijo" el parámetro está ahora disponible a partir de la versión 1.3.17:

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

¡No se requiere más mucking en el CSS! Gracias colorbox chicos!