Colorbox make the light box fixed when scrolling.

Question

hi,

I working with jquery colorbox. When the page content is big and colorbox is opened. Then the color box scrolled along with the page content. I want the colorbox need to be fixed even the background content scrolls.

Please help me out to fix this issue.

Answer 1

try this. change the colorbox.css the first css rule :

from

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

to

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

Puaka i am changing a little thing, which make it works awesome. It aligns center perfectly.

Change the colorbox.css

from

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

to

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

colorbox is perfectly aligned.

Answer 3

puaka method only worked if I was scrolled all the way to the top. else the box would appear lower down.

i devised another method.

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

onOpen remove the body's scrollbar onClosed replace the scrollbar

Answer 4

This one works even better for me:

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

Answer 5

based on bradaric idea, you might need to change

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

to

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

in the position function. (Works for me)

Answer 6

the css fix doesn't work for IE quirks mode.. ideas any body ?

thanks, David