[JQUERY/CSS] Een full page overlay die scrollable is

[Ferra]

Beste tweakers,

Ik ben bezig met een nieuwe website. Op deze website zal je op een plaatje kunnen klikken, waarna een popup a la pinterest zal moeten verschijnen. Dit is een full page overlay met een opacity op de background. In het midden dient een div te komen waarin content komt te staan. Deze full page overlay moet scrollable zijn (afhankelijk van de hoeveel content in de content-div) met de scrollbars van de browser. De pagina eronder dient niet gescrolld dan te kunnen worden.

Is dit te realiseren? en zo ja, wie kan mij in de richting helpen?

[SandaX]

Ik zou eens gaan googlen op "lightbox".

[Zoefff]

Je bent inderdaad op zoek naar een "lightbox". Een goede en bekende implementatie die bovenop jQuery werkt is Fancybox.

Google daar wat mee verder zou ik zeggen

[Ferra]

Heren,

Fancybox gebruik ik inderdaad. Echter wordt daar de scrollbar geplaatst binnen de popup en wordt niet de scrollbar van de browser gebruikt. Maar als jij weet hoe je dat kan aanpassen, be my guest

[Zoefff]

Tsja, dan moet je gewoon een beetje creatief zijn. Je kan bijvoorbeeld de fancybox op 100% bij 100% kunnen zetten zodat deze de hele pagina beslaat. De fancybox geef je een halftransparante achtergrond en een container die je minder breed maakt met b.v. een fixed width of een padding danwel marge. Zo kan je scrollen in de fancybox en staat de scrollbalk rechts, terwijl je daarmee alleen de inhoud scrollt. Dan nog een beetje pielen met een overflow: hidden op de pagina zelf zodra de fancybox openstaat, zodat de scrollbalk van de pagina (indien aanwezig) verdwijnt.

Maargoed, ook zonder fancy plugins kan je zoiets natuurlijk eenvoudig maken. Gebruik je creativiteit

[Bigs]

Geef de div met je content een hoogte en breedtte in de CSS en geef hem de CSS overflow: auto; Klaar

Ow je wil de scrollbar van de browser gebruiken. Dat werkt zo niet. Het lijkt me ook vreselijk onintuitief aangezien je dat nergens tegenkomt, dus ik zou je afraden om het zo te doen.

[ Voor 48% gewijzigd door Bigs op 15-03-2012 16:03 ]