Donny Bahama Posted January 18, 2018 Share Posted January 18, 2018 I'm using a script that toggles different popup divs when different links are clicked. The problem is the placement of the popup with regard to the screen height. I always want the popups centered horizontally so each popup has margin-left and margin-right set to auto -- but setting margin-top and margin-bottom to auto doesn't work. Is there some way to position the popups at the top of the visible screen so that even if it's viewed on a relatively small screen (i.e. a smartphone in portrait mode), the popup will still pop up in a place that's vertically appropriate, regardless of how far down the page the user has scrolled? The fact that position:sticky exists makes me think that there must be some way of doing this but when I try to detect where the top of a sticky background image is, I always get 0px. Link to comment Share on other sites More sharing options...
Ingolme Posted January 18, 2018 Share Posted January 18, 2018 For a popup you can use fixed position and vh units, which refer to percentage of the viewport height. .popup { position: fixed; top: 5vh; height: 90vh; /* Center horizontally */ left: 50%; transform: translateX(-50%); width: 900px; max-width: 95vw; } Link to comment Share on other sites More sharing options...
Donny Bahama Posted January 18, 2018 Author Share Posted January 18, 2018 That doesn't seem to work. It places it within the div (where all the popups are - at the bottom of the main content) with a top margin that looks to be about 10% of the screen height. (I used 10vh.) I tried using position:absolute instead of fixed. Same result. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 18, 2018 Share Posted January 18, 2018 https://www.w3schools.com/code/tryit.asp?filename=FNKT1I1OB9M4 1 Link to comment Share on other sites More sharing options...
Donny Bahama Posted January 18, 2018 Author Share Posted January 18, 2018 18 minutes ago, dsonesuk said: https://www.w3schools.com/code/tryit.asp?filename=FNKT1I1OB9M4 Wow! That works great! (I wish I understood why it works. ".popup:before" would be a lot more logical than ".popup:after") Anyway, thank you! I think I can adapt that to work for me. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 18, 2018 Share Posted January 18, 2018 (edited) Either one will work, its used to insert a text element to help vetically align the popup content box as it need something to align to, this also uses display: inline-block so it acts as text would with text-align and vertical-align, you can change to top/bottom whatever. Edited January 18, 2018 by dsonesuk 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now