Modal Dialog won't centre on screen? - CSS-Tricks

This topic is empty.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
November 17, 2013 at 11:42 am #156312
fl0shizzle
Participant
Hey guys.

Here’s my website: http://www.alexgurr.co.uk

I’m trying to get my modal window centred on the screen. I’ve tried every combo of fixed, relative, absolute. I had it working, then the navigation got bodged up so I started from my original index file, and now I cant get it working any ideas? You can see the dialog when you click the first project image. If you’re right at the top its there but if you’ve are scrolled down the page at all and click it, it still opens at the top and doesn’t move to the current center?

Here’s the code pertaining the window:
```
/*********************************************************************************/
/* Modal Dialog                                                                        */
/*********************************************************************************/


#overlay {
     visibility: hidden;
     position: fixed;
     left: 0;
     top: 0;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
     background-image:url(http://s18.postimg.org/5fexsq21h/image.png);   

     }

#overlay div {

     width: 50%;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
     overflow:auto;
     -webkit-border-radius: 10px;
     -khtml-border-radius: 10px;    
     -moz-border-radius: 10px;
     -border-radius :10px;
}
```
Source file is available if you go to the website and use your browser. Thanks! Alex
November 17, 2013 at 12:19 pm #156313
Merri
Participant
The issue happens because position: fixed; doesn’t work it’s usual way on your page: #skel-panels-pageWrapper has a CSS backface-visibility: hidden; and this has a side-effect that makes 100% for fixed elements to not be the usual size of visible viewport, but instead be the size of the element that has backface-visibility set. Which means your #overlay element inside #skel-panels-pageWrapper is over 4000px tall!

Easiest solution is to use height: 100vh; and then the fixed element will be 100% viewport height. So your CSS should read:
```
/* for browsers that don't support viewport units (they also won't support CSS 3D transforms AFAIK) */
height: 100%;
/* for browsers that do support viewport units */
height: 100vh;
```
And after that it is easy enough to make anything go to the middle of the overlay element.

In summary I’d say this is an interesting side effect that 3D transforms have.

Edit!

Ah, I forgot that the element also appears at the top of the transformed element. So you’d have to adjust the top position of the element as well, and that isn’t that nice as you’d have to do it in JavaScript. It would be best if you avoided setting backface-visibily.
November 17, 2013 at 12:28 pm #156314

fl0shizzle
Participant

Which CSS file do I put that in? The modal dialog section in style.CSS? Or in the skel-panels css? The woes of using an HTML5 template!

Regards

November 17, 2013 at 12:38 pm #156315

Merri
Participant

I updated last post: setting height to 100vh doesn’t fully solve the problem, because the fixed element still scrolls with the page (instead of staying in place like fixed elements normally do).

3D transform with backface-visibility: hidden; sets the viewport of the fixed element to be the transformed element. So it would be better to get rid of that style.

Easy Option #1: move overlay element outside any of the skel-panel elements.

Easy Option #2: edit skel-panel code and remove backface-visibility rule.

Hard Option #3: throw feedback at skel-panel author(s) and tell about this issue and keep doing so until they fix it in their release.

November 17, 2013 at 12:44 pm #156317
fl0shizzle
Participant
Tried moving the overlay element outside the skel-panel. Doesn’t work:
```
<body>

            <div id="overlay">
                 <div>
                      <h3>Mathematics Program.</h3>
                      <p>Click here to [<a href='javascript:void(0);' onclick='overlay()'>close</a>]</p>
                 </div>
            </div>
        
            <div id="header" class="skel-panels-fixed">

                <div class="top">
```
Edit!

Tried removing {backface-visibility”,”hidden” } from the javascript. Instantly works. Much love for you <3. Thanks!
November 17, 2013 at 12:48 pm #156318
fl0shizzle
Participant
- rep for you {if it existed ;) }
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘CSS’ is closed to new topics and replies.