Colorbox rend la boîte à lumière fixe lors du défilement

Je travail avec jquery colorbox. Lorsque le contenu de la page est grande et colorbox est ouvert. Puis la couleur de la boîte de défilement avec le contenu de la page. Je veux la colorbox doivent être fixés, même l'arrière-plan du contenu défile.

Merci de m'aider à résoudre ce problème.

source d'informationauteur itsoft3g

  1. 22

    peut-être que toutes ces réponses sont à partir d'une version antérieure de colorbox, mais le "fixe" paramètre est maintenant disponible à partir de la version 1.3.17:

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

    pas plus de déblayage sur dans le CSS n'est requise! Grâce colorbox les gars!

  2. 4

    Puaka je suis de changer un peu la chose, qui en font des œuvres génial. Il aligne centre parfaitement.

    Changer la colorbox.css

    de

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

    à

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

    colorbox est parfaitement alignés.

  3. 2

    de l'essayer. modifier la colorbox.css la première règle css :

    de 

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

    à

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

    Espère que ce sera également utile.

    $(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'});
        }
    });
});
  5. 0

    puaka méthode ne fonctionnait que si j'étais défiler tout le chemin vers le haut.
    le reste de la zone apparaît en bas.

    j'ai mis au point une autre méthode.

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

    onOpen enlever le corps de la barre de défilement
    onClosed remplacer la barre de défilement

  6. 0

    Celui-ci fonctionne encore mieux pour moi:

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

    basé sur bradaric idée, vous pourriez avoir besoin de changer

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

    à

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

    dans la fonction de position. (Fonctionne pour moi)

  8. 0

    Le css correctif ci-dessus fonctionne parfaitement bien pour Mozilla et Chrome, mais sous IE, il donne quelques rembourrage problème si l'événement a lieu entre la page. U peut prolonger la fonction à l'aide de crochets et de masquer le dépassement de capacité lors de la colorbox est ouvert. Exemple :

    $(document).ready(function(){

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

    le code ci-dessus ajoute du style overflow:hidden pour le corps, si u fermer la colorbox vous pouvez trouver le scroll n'est pas là, sur la page, donc vous devez ajouter cette ligne dans $(document).ready(function() .

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

    Je crois que les méthodes ci-dessus ne sont pas aptes à Colorbox fixe lorsque le défilement. La méthode suivante, je l'ai testé sur tous les navigateurs (IE7 et plus):

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

    Cette méthode fonctionne blendent

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