Simple popup in html and css. CSS Modals

Open window 1 Open window 2 Video in window 3 Photo in window 4

In the above code example, for clarity, I wrote brief explanations in the containers of modal windows. It remains for you by analogy, in div container pop-up window, place any of your content, be it simple text, pictures or videos from any third-party resource, YouTube, Vimeo, etc. Links to the call of modal windows can be made text, or you can arrange them in the form, as in the example.

Step 2. CSS

The next step, this is the most interesting, it is important to prepare all the necessary styles for our modal window, design the appearance and add functionality. I have omitted the basic page styles so as not to confuse, and have added some comments with comments for clarity:

/ * Basic blackout and modal layer styles * / .overlay (top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: none; / * blackout background * / background-color: rgba (0, 0, 0, 0.65); position: fixed; / * fixed positioning * / cursor: default; / * cursor type * /) / * activate the shading layer * / .overlay: target (display: block;) / * modal styles * / .popup (top: -100%; right: 0; left: 50%; font-size: 14px; z-index: 20; margin: 0; width: 85%; min-width: 320px ; max-width: 600px; / * fixed positioning, the window is stable when scrolling * / position: fixed; padding: 15px; border: 1px solid # 383838; background: #fefefe; / * rounding corners * / -webkit-border-radius : 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; font: 14px / 18px "Tahoma", Arial, sans-serif; / * outer shadow * / -webkit -box-shadow: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); -moz-box-shadow: 0 15px 20px rgba (0,0 , 0, .22), 0 19px 6 0px rgba (0,0,0, .3); -ms-box-shadow: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); box-shadow: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); -webkit-transform: translate (-50%, -500%); -ms-transform: translate (-50%, -500%); -o-transform: translate (-50%, -500%); transform: translate (-50%, -500%); -webkit-transition: -webkit-transform 0.6s ease-out; -moz-transition: -moz-transform 0.6s ease-out; -o-transition: -o-transform 0.6s ease-out; transition: transform 0.6s ease-out; ) / * activate the modal block * / .overlay: target + .popup (-webkit-transform: translate (-50%, 0); -ms-transform: translate (-50%, 0); -o-transform: translate ( -50%, 0); transform: translate (-50%, 0); top: 20%;) / * form the close button * / .close (top: -10px; right: -10px; width: 20px; height: 20px; position: absolute; padding: 0; border: 2px solid #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius : 15px; border-radius: 15px; background-color: rgba (61, 61, 61, 0.8); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; box-shadow: 0px 0px 10px # 000; text-align: center; text-decoration: none; font: 13px / 20px "Tahoma", Arial, sans-serif; font-weight: bold; -webkit-transition: all ease .8s; -moz-transition: all ease .8s; -ms-transition: all ease .8s; -o-transition: all ease .8s; transition: all ease .8s;) .close: before (color: rgba ( 255, 255, 255, 0. nine); content: "X"; text-shadow: 0 -1px rgba (0, 0, 0, 0.9); font-size: 12px; ) .close: hover (background-color: rgba (252, 20, 0, 0.8); -webkit-transform: rotate (360deg); -moz-transform: rotate (360deg); -ms-transform: rotate (360deg) ; -o-transform: rotate (360deg); transform: rotate (360deg);) / * images inside the window * / .popup img (width: 100%; height: auto;) / * left / right thumbnails * / .pic -left, .pic-right (width: 25%; height: auto;) .pic-left (float: left; margin: 5px 15px 5px 0;) .pic-right (float: right; margin: 5px 0 5px 15px ;) / * m-media elements, frames * / .popup embed, .popup iframe (top: 0; right: 0; bottom: 0; left: 0; display: block; margin: auto; min-width: 320px; max-width: 600px; width: 100%;) .popup h2 (/ * heading 2 * / margin: 0; color: # 008000; padding: 5px 0px 10px; text-align: left; text-shadow: 1px 1px 3px #adadad; font-weight: 500; font-size: 1.4em; font-family: "Tahoma", Arial, sans-serif; line-height: 1.3;) / * paragraphs * / .popup p (margin: 0; padding: 5px 0)

As you can see, dear friends, everything is pretty simple and no unnecessary mess. If you do everything correctly, you will get a wonderful toolbox in your arsenal, in which you can place any content, be it text content, photographs, various forms of registration and feedback, or videos from any third-party source. Experiment with the parameters, modify the window as your heart desires. If possible, share in the comments your best practices, or any problems that have suddenly arisen.

Or maybe it will be interesting for you:

Supplements:

Often, even very often, I am asked the question of how to properly stop video playback when closing a mod. window. When the modal window is closed, the video in the demo stops playing. In the demo, I used the onclick event for the window close button, specifying the address of the demo page in the link, i.e. the page on which the video window is located:

One can simply use the link with empty attribute href = "", in both cases the page is reloaded and, accordingly, the window is closed, and the video stops, the crutch is still that, of course, but another more effective and valid solution, without connecting javascript, to this moment I do not have.

Using the JavaScript API, you can control the Chromeless Player and the built-in YouTube player with using javaScript code. For our modal block with inline video, the js executable will be like this:

When you click on the button with id = "stop", the function will be called, the window will close and the video will stop playing.
However, it should be understood that for other video services, dances with tambourines will be different))). Although there is always a choice - it is to use ready-made specialized plugins.

Web designers and entrepreneurs who live in Russian-speaking countries probably want to be able to use more than just English-language templates. They also want to have access to collections of Russian-language ready-made solutions. Therefore, we would like to draw your attention to the newest section, which is now presented on the TemplateMonster marketplace. It's worth mentioning that the text for each of the templates was hand-written. Plus, you don't need to have any supernatural coding knowledge to create an impressive online project.

With all respect, Andrew

Nowadays, for various sites, all kinds of pop-up modal windows - pop-ups - for registration, authorization, information windows, - of all shapes and sizes, have become the norm. great amount plugins plus jQuery for simple and convenient creation such popups - the same Shadowbox, for example.

The appearance, size and design of such pop-ups are completely varied - with overlay, shadows, animations - just countless. 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 means of JS. I will not go into the details of these calculations, I will describe them only briefly:

Popup HTML code usually has the following structure:

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

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

JS detects the browser and browser version, and based on this calculates the dimensions work area and the sizes of the popup itself (if they are not specified), and then simple calculations of the position of its upper left corner are performed (css properties left and top for .popup). Many plugins also react to page resizing, recalculating the whole thing every time so that the popup is located exactly in the center of the workspace.

I'm a perfectionist by nature (I know, sometimes it's bad), and often bother even over small details, trying to improve and add the maximum possible extensibility to these details, and I could not help but be hooked on this very moment in the work of all these plugins. The thought arose that all the work on positioning the popup can be shifted from the shoulders of JS to the shoulders of the browser itself, that is, this work can be done using CSS.

This is what we will do.

Below I will give an example of a popup that works in all major versions of major browsers. To make it work correctly in IE<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

So, we have a page with a button, when clicked, a modal window with some information should pop up, and all other content should be shaded with an overlay.

Let's start with the HTML code. Its structure will differ slightly from the code indicated above, why - more on this below in the article; element classes will remain the same:

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

And some CSS:

Popup__overlay (
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999
}
.popup (
}

Fixed sizes

Popup (
left: 50%;
top: 50%;
width: 400px;
height: 200px;
margin-left: -200px;
margin-top: -100px
}

Negative margins of half the width and height are trivial and boring, nothing original about that.

Popup sizes depend on the content

Popup (
margin: auto
}

This will not affect vertical alignment in any way, and, by the way, if you only need horizontal alignment, then you can stop there by specifying some other top margin of the popup. But this is not enough for us! Move on.

Vertical alignment. This is where it gets interesting. Of course, a table or emulation of a table using display: table & display: table-cell would cope with such a task without any problems, but making this work in old IE is more expensive. The table also disappears - for obvious reasons.

So, the margin is already missing - we do not know the sizes. Let's remember what properties with similar effects are. Yep, text-align. But only for inline elements. OK. It seems that God himself ordered the use of display: inline-block - a block element to which one could apply properties for inline elements. With the support of this property in all browsers, too, everything, one might say, is in order. The code becomes something like this:

Popup__overlay (
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
text-align: center
}
.popup (
display: inline -block;
vertical-align: middle
}

Remains vertical alignment - vertical-align is fine 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), we cannot use it here. One trick comes to the rescue with vertical alignment of elements of unknown sizes. 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 "expands" the line height to 100% of the parent's height, that is, to the height of the page's working area. Let's make it more elegant by using pseudo-elements instead of unnecessary markup:

Popup__overlay: after (
display: inline -block;
width: 0;
height: 100%;
vertical-align: middle;
content: ""
}

It remains to add a semi-transparent overlay darkening - rgba will handle this. Everything! Now the position of the popup is controlled only by the browser at the CSS level.

Modals are a commonly used tool in the webmaster's arsenal. It is very well suited for solving a large number of tasks, such as displaying registration forms, ad units, messages, and so on.

But despite the important place in information support project, modals are usually implemented in JavaScript, which can create problems when expanding functionality or providing backward compatibility.

HTML5 and CSS3 allow you to create modals with extraordinary ease.

HTML markup

The first step towards creating a modal is simple and effective markup:

Open modal window

Inside a div element the content of the modal is placed. You also need to arrange a link to close the window. For example, let's post a simple heading and a few paragraphs. The complete markup for our example would look like this:

Open modal window

Styles

Create a class modalDialog and we begin to shape the appearance:

ModalDialog (position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba (0,0,0,0.8); z-index : 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none;)

Our window will have a fixed position, that is, it will move down if you scroll the page while the window is open. Also, our black background will expand to fill the entire screen.

The background will have a slight transparency, and will also be positioned on top of all other elements by using the property z-index.

Finally, we set up transitions for displaying our modal window and hide it in an inactive state.

Maybe you don't know the property pointer-events, but it allows you to control how the elements react to the mouse click. We set the value to its value for the class modalDialog, since the link should not respond to mouse clicks when the pseudo class is active “: Target”.

Now we add the pseudo class : target and styles for the modal window.

ModalDialog: target (display: block; pointer-events: auto;). ModalDialog> div (width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: # fff; background: -moz-linear-gradient (#fff, # 999); background: -webkit-linear-gradient (#fff, # 999); background: -o-linear-gradient (#fff, # 999); )

Pseudo class target changes the display mode of the element, so our modal will be displayed when the link is clicked. We also change the value of the property pointer-events.

We define the width of the modal and the position on the page. Also define a gradient for the background and rounded corners.

Close the window

Now we need to implement the functionality of closing the window. We form the appearance of the button:

Close (background: # 606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font- weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px # 000; -webkit-box-shadow: 1px 1px 3px # 000; box-shadow: 1px 1px 3px # 000;) .close: hover (background: # 00d9ff;)

For our button, we set the background and text position. Then we position the button, make it round using the rounding property of the frame, and form a subtle shadow. When you hover the mouse cursor over the button, we will change the background color.