Modal window in pure CSS. Aligning a modal window to the center

Modal windows are a frequently used tool in a webmaster's arsenal. It is very suitable for solving large quantity tasks such as displaying registration forms, advertising units, messages, and so on.

But despite important place V information support project, modal windows are usually implemented in JavaScript, which can create problems when expanding functionality or ensuring backward compatibility.

HTML5 and CSS3 make it incredibly easy to create modal windows.

HTML markup

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

Open modal window

Inside a div element The contents of the modal window are placed. You also need to provide a link to close the window. For example, let's place a simple title and several paragraphs. The complete markup for our example would look like this:

Open modal window

Styles

Create a class modalDialog and begin to form 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; display: none;

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

The background will have a slight transparency and will also be placed on top of all other elements through the use of the property z-index.

Finally, we set the 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 elements will react to mouse clicks. 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 a 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 output mode of the element, so our modal window will be displayed when you click on the link. We also change the property value pointer-events.

We define the modal window's width and position on the page. We also define a gradient for the background and rounded corners.

Closing the window

Now we need to implement the window closing functionality. Forming 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; -moz-box-shadow: 1px 3px #000; 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 frame rounding property and form a light shadow. When you hover your mouse over the button, we will change the background color.

My first post.
Centering a block relative to another block is a relatively common problem; this is yet another solution to it. For me, it has become the most universal and covers all cases that I have ever encountered.

Formulation
Center the modal window horizontally and vertically.

Conditions

• Modal dimensions can be indicated in any units of measurement. Or they may not be specified at all.
• Responsiveness. When resizing the window, the modal adapts to the current size.
• If the modal is laid out so that it has min-height/min-width, then when resizing the window to smaller sizes A scroll should appear.
• IE 9+.
• Positioning should be implemented in CSS, without using JS.

How was this done before?
If the dimensions of the modal window are specified, then everything is simple:

* ( box-sizing: border-box; ) .fixed-overlay ( position: fixed; overflow: auto; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0,0,0.5); width: 200px; height: 150px )
Works great, no complaints. But this method is not suitable for us, because we do not want to depend on the size of the modal window.

I saw the first method that satisfies all the listed requirements from Jabher. This is about using the transform property and its translate value instead of margin. Here's how it works:

Modal ( position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); ) .modal_container ( padding: 20px; background-color: #fff; color: #000; )
Magic! Now we are not dependent on the dimensions.modal_container. This is because translate is based on the size of the element to which the property is applied. Let me remind you that percentage values margin properties will be calculated relative to the size of the parent, which is clearly not suitable for us.

Now about the cons. Using the transform property, we will encounter subpixel rendering. Simply put, the content will begin to blur during resizing, the result will look bad, this is especially noticeable when rendering text and thin lines, such as one-pixel borders. I couldn't find solutions to this problem, if you have them, please share them in the comments.

Tadaam

Not long ago I found a method that is amazingly simple. Inline blocks are in a hurry to help. They can be easily centered horizontally by assigning text-align: center to the parent. After thinking a little, I remembered the wonderful vertical-align property. How does it work? If this property is set to middle, then elements with this property will be centered vertically relative to each other. This means that in addition to the .modal element, there must be someone else in the .fixed-overlay who will help our modal to stand in the center of the window. The height of this someone should be equal to the height of.fixed-overlay. A pseudo-element suggests itself for the role of this helper:

.fixed-overlay__modal ( text-align: center; white-space: nowrap; ) .fixed-overlay__modal::after ( display: inline-block; vertical-align: middle; width: 0; height: 100%; content: " "; ) .modal ( display: inline-block; vertical-align: middle; ) .modal_container ( margin: 50px; padding: 20px; min-width: 200px; text-align: left; white-space: normal; background- color: #fff; color: #000;

In this tutorial we will learn how to create a modal window using HTML5 and CSS3. In this tutorial we will not use JS, only full CSS3. Modal windows can be used for a form feedback, for photos and videos, and there are many more options for its use.

Let's start making our modal window.

Step 1: HTML Markup

First of all, we need to make HTML markup, i.e. make a link that will open a window, and make a frame for our window. To do this we write the following code:

Step 2. Contents of the modal window

Now let's add the contents of our window. Let's make a title and some text and put it all in a tag