Modal window in css. The simplest modal window using HTML and CSS. Create a Modal Window Using HTML5 and CSS3

and paste it into the code instead of an ellipsis. We also need to insert a link that will close our window and give it class="close". This is what your code should look like:

PROJECT REDSTAR

REDSTAR- a project dedicated to issues that have interested you for so long. On this project free lessons and articles on various topics. The topics are very diverse, ranging from simple Windows installations and ending with website development.

Step 3. Styles

Now let's start writing styles for our window. In this step we will make our window invisible. It will only appear when you click on the link. To do this, we write styles for our class modalDialog:

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;

Step 4. Functionality and viewing

In this step we will make sure that our window is already functioning. To do this, let's add a few more styles for our class modalDialog:

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

At this step you can already view your window, it is already functioning. But, button close it doesn't look very nice.

Now we need to add styles for our class close.

Step 5. Making a close button

In this step we will improve the appearance of our button, which will close our window. To do this, we write styles for our class close:

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: #860015;)

Well, now our button looks the way it was intended. It should look like this for you:

On this this lesson finished. Thank you for your attention! For your convenience, I have added a demo version and source files. If something is not clear, then download the source files.

The lesson was prepared for you by the site team REDSTAR.

Hi all! In that a little lesson We'll create a simple yet powerful modal window using pure CSS. And at the same time we will repeat (and for whom we will open) such useful thing like flexbox. In this case, we will create not just a modal window that opens when clicked, but which is positioned exactly in the center of the screen. Once upon a time this could only be done with using javascript, but time passes and now this can be done with literally 4 lines of code.

Open modal window

This entire modal window consists of two layers - the first layer, which has the class ModalWindow, darkens the entire space around the modal window and will align the contents of the window to the center of the screen. The second layer is class Modal_Body— contains the content of the modal window itself.

Now let's create the CSS code for this markup:

Modal ( position: fixed; display: none; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: rgba(0,0,0,0.7); pointer-events: none ; ) .Modal:target ( display: flex; pointer-events: auto; ) .Modal_Body ( position: relative; z-index: 2; display: block; margin: auto; padding: 15px; background: #FFF; ) . ModalFull ( position: absolute; display: block; z-index: 0; width: 100%; height: 100%; )

Let's now look at the operation of the modal window and understand how it works.

As we can see, when you click on “Open modal window,” the entire window is shaded, and a white modal window appears exactly in the center. Let’s stop there for now and devote ourselves to theory.

Since we have agreed not to use javascript and cannot use it to track clicks on elements, we can easily do this using a css pseudo-class and an anchor link with a hash (to indicate the element on the given page) and id with a value that must be equal to the pointer in the link. Look at our example: href links and id the main container of the modal window have the same value - ModalWindow. This is important because the browser needs to understand which elements will interact with each other.

In our case, the general container of the modal window is hidden and, accordingly, the entire content of the modal window is hidden. But when the link is clicked the element gets a pseudo class :target and appears accordingly. Look in the css code - property display changes from none on flex. Note that it is flex, because with it we can align Modal_Body exactly in the center of the screen. We wrote all the other styles for it right away.

By the way, if you don’t quite understand how it was so flattened across the entire surface of the screen, I’ll tell you - it’s all about the following 4 lines:

Top: 0; right: 0; bottom: 0; left: 0;

We indicated that it should be at the zero pixel on the right, left, top and bottom at the same time. Instead, you can use, for example, the following construction:

Width: 100%; height: 100vh;

Here we specify a width equal to 100% of the screen, but it is better to set the height using viewport height— browser window height. I'll stick to my version.

Another important nuance is the meaning z-index properties at Modal And Modal_Body. They must be present, and Modal_Body it must be at least one unit larger in value, otherwise the content of the modal window will not be available - links and buttons will not be clickable. And if there is content with scrolling, this will also not work, since one element will overlap another.

Let's continue to create our masterpiece. When clicked, a modal window appears, but we cannot close it just as easily. Let's add a button to close it:

Actually, she cancels :target for our modal window and then it simply accepts starting position- disappears out of sight. But there is some subtlety with this link - when you click it, the browser will try to find such an element, but will fail, and will scroll the page to the very beginning. This behavior is one of the small disadvantages of this approach to making modal windows, but it can be dealt with.

For this attribute href at the link we change from «#» on "#ModalWindowClose", and for the button link that opened the window, add an attribute id with the same meaning. You can also use the attribute name, but in HTML5 it is better to define an anchor and requires an attribute id.

Open modal window

Now when clicked the browser will fall back to the button. For the sake of truth, I want to say that this anchor will be located along the top edge of the screen. But, if this button to open is located in the header or footer, then this problem is leveled out. And if the header has a fixed position, then it will be absolutely fine - for example, for ordering call back or pre-order/consultation will be perfect even when the window closes.

Here's an example of what we got:

You can modify the container a little more Modal_Body- these are size restrictions (so that it does not spread out in height and width). And one more small nuance - I recommend, if possible, placing the code with a modal window before the closing tag.

This is how you can quickly create a modal window. This code we wrote can be used in basic version, adding the necessary styles as necessary.

I hope my lesson was useful to you. Good day to you and see you new meeting on the Web Islands!

A modal window that is simple in function, which is completely made in pure CSS, where you can put under different functions to call on the site. This is probably one of many that I have come across from a selection of modal windows, in terms of its settings, but also in terms of installation. But the main thing is its functionality, which will not be inferior to others. Also, by default it is made in a light shade, where in the right top corner There is a button installed in the form of a cross.

Which will be used to disable the function or simply to make the frame disappear, where even on this small element there is an effect of changing the color palette. Now the web master can put it on the site and place in it a description or operators that can display different categories, as statistics or informer.

But the thing is, if you have a dark resource style, then in style you can quickly change the gamma, or rather, adapt it to original design. Here is one of the standard methods how to do it pure CSS to a modal window that will be launched when the button under the link with HTML binding is clicked. The button itself is more for visibility, where in the styles, by removing one class, the name will remain, which can be placed either in the navigation or in the control panel, where the main functionality or site navigation is located.

This is when checking that everything works fine:

Let's start installation:

Window with a button

CSS

Butksaton-satokavate (
display: inline-block;
text-decoration: none;
margin-right: 7px;
border-radius: 5px;
padding: 7px 9px;
background: #199a36;
color: #fbf7f7 !important;
}

Anelumen (
display: flex;
position: fixed;
left: 0;
top: -100%;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
opacity: 0;
-webkit-transition: top 0s .7s, opacity .7s 0s;
transition: top 0s .7s, opacity .7s 0s;
}

Anelumen:target (
top: 0;
opacity: 1;
-webkit-transition: none;
transition: none;
}

Anelumen figure (
width: 100%;
max-width: 530px;
position: relative;
padding: 1.8em;
opacity: 0;
background-color: white;
-webkit-transition: opacity .7s;
transition: opacity .7s;
}

Anelumen.lowingnuska figure (
background: #f9f5f5;
border-radius: 7px;
padding-top: 8px;
border: 3px solid #aaabad;
}

Anelumen.lowingnuska figure h2 (
margin-top: 0;
padding-bottom: 3px;
border-bottom: 1px solid #dcd7d7;
}

Anelumen:target figure (
opacity: 1;
}

Anelumen.lowingnuska.compatibg-ukastywise (
text-decoration: none;
position: absolute;
right: 8px;
top: 0px;
font-size: 41px;
}

Anelumen.nedismiseg (
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(10, 10, 10, 0.87);
content: "";
cursor: default;
visibility: hidden;
-webkit-transition: all .7s;
transition: all .7s;
}

Anelumen:target .nedismiseg (
visibility: visible;
}

You also need to know that CSS styling and pseudo-class are one of those that are not fully used by CSS features with many interesting potential applications.

It starts when URL address page corresponds to the identifier of its element, or you can say it differently, this is when the user jumps to specific element On the page.