The simplest modal window in HTML and CSS. Creating a Modal with HTML5 and CSS3

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

Which will go to the disable function or just 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 a description or operators in it, which can display different categories, like statistics or an informer.

But the fact is, if you have a dark style of the resource, then in the style you can quickly change the gamma, or rather, fit it to the original design. Here's one of the standard methods for putting pure CSS on a modal that will fire when you click on a button below a link with an HTML anchor. The button itself goes more for visibility, where in the styles, removing one class and the name will remain, which can be put both 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 the installation:

Window with 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;
}

It's also worth knowing that CSS styling and pseudo-classing is one of those not fully exploited features of CSS with many interesting potential applications.

It fires when the page's URL matches its element's ID, or put another way, it's when the user jumps to a specific element on the page.

Hello everyone! In this short tutorial, we'll create a simple yet powerful pure CSS modal window. And at the same time we will repeat (and for whom we will open) such a useful thing as flexbox. At the same time, we will create not just a modal window that opens on click, but which is positioned exactly in the center of the screen. Once upon a time, this could only be done using javascript, but time goes by and now this can be done using literally 4 lines of code.

Open modal window

All this modal window consists of two layers, as it were - the first layer, which has the class ModalWindow, darkens all the space around the modal window and will align the content of the window to the center of the screen. The second layer is the class Modal_Body- contains the content of the modal window itself.

Now let's create the CSS 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%; )

Now let's look at 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 agreed not to use javascript and can't track clicks on elements with it, we can easily do this with a css pseudo-class and an anchor link with a hash (to point to an element on a given page) and id c with a value that must be equal to the pointer in the reference. Look at our example: href links and id the main container of the modal window have the same meaning − 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, all the 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 css code - property display changes from none on the flex. Note that it is flex, because with it we can align Modal_Body right in the center of the screen. All other styles we registered for him immediately.

By the way, if you don’t quite understand how it was so flattened over 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 somehow be in the zero pixel on the right, left, top and bottom at the same time. Instead, you can use, for example, the following construct:

Width: 100%; height: 100vh;

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

Another important nuance is the value of the z-index property of Modal and Modal_Body. They must be mandatory and Modal_Body it must be greater in value by at least one unit, otherwise the content of the modal window will not be available - links and buttons will be impossible to click. And if there is scrolling content, then this will not work either, since one element will overlap the other.

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

In fact, she cancels :target for our modal window, and then simply takes the initial position - it is hidden 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 scroll the page to the very beginning. This behavior is one of the minor 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 the "#ModalWindowClose", and for the link-button that opened the window, add the attribute id with the same value. You can also use the attribute name, but in HTML5 anchor definition is better and requires attribute id.

Open modal window

Now when you click the browser will roll back to the button. For the sake of truth, I want to say that this anchor will be located at the top edge of the screen. But, if this button to open is in the header or footer, then this problem is leveled. And if the header has a fixed position, it will be generally great - for example, for ordering a callback or pre-order / consultation, it will work fine even when the window is closed.

Here is an example of what we got:

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

.

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

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

A dialog box is a great way to display a short message or information. The modal window is a very popular web design element these days. If you add some special content to the page, then it is better to put it in a modal window:

Previously, it was created using JavaScript, which on this moment not considered best practice. But HTML5 and CSS3 make it easy to create modal windows. In this tutorial, we will be using CSS3 transitions, opacity, pointer-event and background color.

This modal window will be designed in pure CSS. It will be responsive and should work fine on smartphones and tablets. And also on large screens with high resolution.

Creating CSS Modal Window

First of all, we need to create a simple HTML code:

We have a simple link that offers to open a modal window and hashtag modal-one . We'll be styling all of this right here with classes, so the id is used as a hook to create the modal.

Keep in mind that we'll only be using CSS and not a jQuery modal, so we'll use the pseudo selector “ :before target”.

Next, you need to save all the contents of the modal window. Inside the div, we will place a hyperlink. It closes the container that we display with using CSS. You can then place a heading with a few paragraphs of text below it. Our HTML markup will now look like this: