CSS modal windows

Nowadays, various pop-up modal windows - popups - for registration, authorization, information windows, - of all shapes and sizes have become the norm for various sites. There is also a huge number of plugins to the same jQuery for simple and convenient creation of such popups - the same Shadowbox , for example.



The appearance, size and design of such pop-ups are completely diverse - with overlays, shadows, animations - just do not count. What unites them is, perhaps, the fact that they are usually displayed in the very center of the page, both horizontally and vertically. And centering is done by JS. I will not go into the details of these calculations, I will describe them only briefly:
')
The HTML code of a popup usually has the following structure:

<div class ="popup__overlay"></div> <! -- --> <br/><div class ="popup">...</div> <! -- --> <br/>

And CSS ( here and below, I will deliberately omit writing some properties that are necessary only for some browsers and their versions, leaving only the most basic ):

.popup__overlay {<br/> position : fixed ;<br/> left : 0 ;<br/> top : 0 ;<br/> background : #000 ;<br/> opacity : . 5 ;<br/> filter : alpha( opacity=50 );<br/> z-index : 999 <br/> }<br/> .popup {<br/> position : absolute ;<br/> width : 20% ;<br/> z-index : 1000 ;<br/> border : 1px solid #ccc ;<br/> background : #fff<br/> } <br/>

JS determines the browser and browser version, and on the basis of this calculates the dimensions of the working area and the dimensions of the popup itself (if they are not specified), and then some simple calculations are made of the position of its upper left corner (css properties left and top for .popup). Many plugins also react to resizing the page, recounting the whole thing every time so that the pop-up is located exactly in the center of the workspace.

I am a perfectionist by nature (I know, sometimes this is bad), and often I even bother with small details, trying to improve and add the maximum possible extensibility to these details, and this particular moment could not catch me in the work of all these plug-ins. There was a thought that all the work on positioning the popup can be shifted from the shoulders of JS onto the shoulders of the browser itself, that is, to perform this work using CSS.

This will do.

Below I will give an example of a popup that works in all major versions of major browsers. To work correctly in IE <9, some extra markup and hacks are needed, so I’ll omit the detailed description of writing this method, and for those interested I’ll post the full version.

So, we have a page with a button, when clicked, a modal window should pop up with some information, and the rest of the content should be shaded overlay.

For a start - HTML code. Its structure will differ slightly from the code indicated above, why - about this later in the article; element classes will remain the same:

< div class ="popup__overlay"> <br/> < div class ="popup"></ div > <br/> </ div > <br/>

And some CSS:

.popup__overlay {<br/> position : fixed ;<br/> left : 0 ;<br/> top : 0 ;<br/> width : 100% ;<br/> height : 100% ;<br/> z-index : 999 <br/> }<br/> .popup {<br/> } <br/>

Fixed sizes

The easiest option. There is no need to invent anything new:

.popup {<br/> left : 50% ;<br/> top : 50% ;<br/> width : 400px ;<br/> height : 200px ;<br/> margin-left : -200px ;<br/> margin-top : -100px <br/> } <br/>

Negative margin'y in half the width and height - trite and boring, nothing original in this. Go ahead.

Popup sizes depend on the content.

First, horizontal alignment is seemingly simpler. If the popup is of fixed width, then the following will suffice:

.popup {<br/> margin : auto <br/> } <br/>

It will not affect the vertical alignment in any way, and, by the way, if you only need horizontal alignment, then you can stop at this by indicating some other upper indent of the popup. But this is not enough for us! Go ahead.

Vertical alignment. Here it becomes interesting. Of course, a table or table emulation with the help of display: table & display: table-cell would have coped with such a task, but making it work in old IE is more expensive. The table also disappears - for obvious reasons.

So, the margin already disappears - we do not know the size. We recollect, that is from properties with similar effects. Yeah, text-align. But only for inline elements. OK. It seems that God himself ordered to use display: inline-block - a block element to which properties could be applied for inline elements. With support for this property in all browsers, too, everything can be said to be in order. The code becomes something like this:

.popup__overlay {<br/> position : fixed ;<br/> left : 0 ;<br/> top : 0 ;<br/> width : 100% ;<br/> height : 100% ;<br/> z-index : 999 ;<br/> text-align : center <br/> }<br/> .popup {<br/> display : inline - block ;<br/> vertical-align : middle <br/> } <br/>

Vertical alignment remains - vertical-align will do for us. In any other situation it would also be appropriate to use line-height, but since we do not have a fixed page height (line-height in this context), it cannot be used here. One trick with vertical alignment of elements of unknown dimensions comes to the rescue. I remember exactly that I found this method on Habré, but, unfortunately, I could not find a link to that topic. This method consists in the following: an inline-block element of zero width and 100% height of the parent is added, which “breaks” the line height to 100% of the height of the parent, that is, to the height of the working area of ​​the page. Let's make it more elegant - instead of unnecessary markup, we use pseudo-elements:

.popup__overlay :after {<br/> display : inline - block ;<br/> width : 0 ;<br/> height : 100% ;<br/> vertical-align : middle ;<br/> content : '' <br/> } <br/>

It remains to add a translucent darkening of the overlay - rgba will cope with this. Everything! Now the position of the popup is regulated only by means of the browser at the CSS level.

Final example

From the observed drawbacks of the method, sometimes there are glitches with a display in IE 6-7, in particular, when using floats.

I repeat - my method does not eliminate the use of JS in general, it only partially optimizes the speed of pop-up windows by transferring part of the load from JS to CSS.

I am sure that the method can be improved - both visually and from the inside, and I will be happy with any ideas and suggestions about this, as well as comments on the work and display in various browsers.

UPD: By request, added an example working in IE7 + - http://jsfiddle.net/vend3tta/SE4tS/