The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Simple CSS overlay

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #263268

    I’m trying to create a simple CSS/JS overlay, a bit like Fancybox. However I need it to be quite light and I don’t need animations and additional features. Hence why I’m ‘building’ my own.

    So far I have this:

    Just some simple show/hide jQuery which is fine. My main question is about the overlay content box and how it should scroll when there isn’t enough vertical space available.

    I’ve disabled the scroll on the body when the overlay is visible with JS. I’m wondering is it best if the box itself scrolls or should it be the overlay? Currently the box is absolute positioned which means when the viewport height is reduced the box goes off the screen vertically, so it’s cut off. I guess this could be solved by adding a max-height to the box of say 90%? But I’m yet to cross-browser test that and I know sometimes min/max height can sometimes be problematic?

    So the other option is for the box to run off the bottom of the screen and for the overlay to scroll – is that possible with this markup or would I need a lot more divs? I suppose the positioning of the overlay becomes a bit more difficult then. To keep it centred and then flow off the bottom when it’s too large for the available space?


    Adding this to .box would be easiest?

    max-height: 100%;
    overflow: auto;

    I don’t think that should give any cross browser issues.


    Yeah that’s what I was thinking. A max-height and then overflow: auto. I gave a bit of thought to the scrollable overlay (outer div) if that makes sense but I guess in hidesight it over complicating things!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.