Forums

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
    Posts
  • #263268
    grimski
    Participant

    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: https://codepen.io/moy/pen/xPmmZo

    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?

    #263277
    Shikkediel
    Participant

    Adding this to .box would be easiest?

    max-height: 100%;
    overflow: auto;
    

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

    #263296
    grimski
    Participant

    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.