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


Je travaille avec jquery colorbox. Lorsque le contenu de la page est grand et que colorbox est ouvert. Ensuite, la boîte de couleur défile avec le contenu de la page. Je veux que la colorbox ait besoin d'être corrigée même les parchemins de contenu d'arrière-plan.

Aidez-moi à résoudre ce problème.


12
2018-04-26 08:34


origine


Réponses:


Toutes ces réponses proviennent peut-être d'une version antérieure de colorbox, mais le paramètre "fixed" est désormais disponible à partir de la version 1.3.17:

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

plus besoin de se moquer du CSS requis! Merci les gars de colorbox!


22
2017-09-15 18:19



Puaka je change une petite chose, ça rend ça génial. Il aligne parfaitement le centre.

Changer le 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é.


4
2018-04-26 10:56



essaye ça. changer le colorbox.css la première règle de 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;}

2
2018-04-26 09:13



J'espère que cela 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'});
        }
    });
});

2
2018-02-11 16:42



La méthode puaka ne fonctionnait que si on me faisait défiler jusqu'au sommet. sinon la boîte apparaîtrait plus bas.

J'ai conçu 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 supprimer la barre de défilement du corps onClosed remplace la barre de défilement


0
2018-04-29 15:42



Celui-ci fonctionne encore mieux pour moi:

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

0
2018-05-14 09:49



basé sur l'idée de bradaric, 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. (Travaille pour moi)


0
2018-05-25 16:52



Le correctif css ci-dessus fonctionne parfaitement pour Mozilla et Chrome, mais dans IE, il donne un problème de remplissage si l'événement a lieu entre la page. U peut étendre la fonction en utilisant des hooks et masquer le débordement lorsque la colorbox est ouverte. Exemple :

$(document).ready(function(){

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

le code ci-dessus ajoute un débordement de style: caché dans le corps, si vous fermez la boîte de couleurs, vous pouvez trouver que le défilement n'est pas présent sur la page, vous devez donc ajouter cette ligne dans $ (document) .ready (function () .

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

0
2018-03-11 08:50



Je crois que les méthodes ci-dessus ne sont pas adaptées à Colorbox corrigé lors du défilement. La méthode suivante, j'ai testé sur tous les navigateurs (IE7 et plus grand):

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


0
2018-03-18 14:46