How to make javascript modal windows. Modal window in JS quickly. Modal window using css, how to make a modal window

To display important messages or simply changes made on the site, you can use pop-up windows. There are two types of pop-ups: regular and modal.

Note: modal windows differ from regular windows in that while the modal window is open, the user cannot interact with other elements of the site until the modal window is closed.

You can see an example of a modal window using JavaScript using the alert() method.

Pop-up window

The first step in creating a popup is to create an element (or any other element) and style it:

Document title .okno ( width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; ) Pop-up window! Try »

This will be used as a pop-up window. Now we hide it using the display property value none and add a link that, when clicked, will cause a pop-up window to appear:

Document title #okno ( width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; ) #okno:target (display: block;) Pop-up window! Call popup Try »

Using the pseudo-class:target we select and apply styles to the element that was navigated to. Thus, after clicking on the link, the value of the element's display property will change from none to block .

Now we need to position it in the middle of the page so that it looks like a pop-up window. Make it absolutely positioned and center it vertically and horizontally:

#okno ( width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; /*position and center*/ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; )

Next step There will be an implementation of hiding the window when you click on any place on the page or on the window itself. To do this, we need to position the element inside the element:

Pop-up window!

Then we position the element and stretch it to the entire width and height of the window. We set it display: none; and redirect our link to it:

Document title #main ( display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ) #okno ( width: 300px; height: 50px; text-align: center; padding : 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; ) #main:target (display: block;) Pop-up window! Call popup Try »

Remove display: none from the element. (it is no longer needed, since we are now hiding ). As a result, the parent now hides the popup by redirecting the selection to the page.

This completes the creation of a simple pop-up window.

Modal window

To create a pop-up modal window, take the element, design it and add a link, when clicked on it will appear:

Document title #okno ( width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; position: absolute; top : 0; right: 0; bottom: 0; left: 0; margin: auto; ) #okno:target (display: block;) Pop-up window! Call popup

The next step in creating a full-fledged modal window is to add a button that will hide our window. Let's make a button from regular link, adding it to ours and formatting it:

Document title #okno ( width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; position: absolute; top : 0; right: 0; bottom: 0; left: 0; margin: auto; ) #okno:target (display: block;).close ( display: inline-block; border: 1px solid #0000cc; color: #0000cc ; padding: 0 12px; margin: 10px; text-decoration: none; background: #f2f2f2; font-size: 14pt; cursor:pointer; ) .close:hover (background: #e6e6ff;) Pop-up window!
Close window Call pop-up window Try »

For the effect of dimming the page when displaying a modal window, you need to place all the existing window code in an additional one:

Pop-up window!
Close a window

Position the parent one and stretch it to the entire width and height of the window. We set it display: none; and redirect the window call link to it.

For the child, remove display: none; (it's no longer needed since the parent will hide everything inside it). As a result, the parent is now responsible for displaying the modal window and dimming the page background, and the child is only responsible for decorating the window itself:

Document title #zatemnenie ( background: rgba(102, 102, 102, 0.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; ) #okno ( width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #fff; ) #zatemnenie:target (display: block;).close ( display: inline-block; border: 1px solid #0000cc; color: #0000cc; padding: 0 12px; margin: 10px; text-decoration: none; background: #f2f2f2; font-size: 14pt; cursor:pointer; ) .close:hover (background: #e6e6ff;) Pop-up window!
Close window Call pop-up window Try »

Note: if you need the user to immediately see a pop-up window when entering the page (and not call it via a link), then the page address will need to be entered along with the window id (for example, the address may look like this: site.ru/papka/documet. html#window).

Modal window- a small window that pops up to tell you something important. Is it difficult to make a modal window without Bootstrap? Let's try to figure it out.

Where to insert in the DOM?

Typically, I place it before the closing body tag.

Mainly due to styles. It's much easier to position a modal in CSS when you're dealing with a layer wrapping the entire body, rather than an unknown set of parent elements that could potentially have their own positioning.

Centering

Here's one of my favorite tricks where you can center both vertically and horizontally without knowing the height and width.

Modal ( position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); )

This is very convenient since an open modal window should usually be located directly in the center, despite its width. The height is even more likely to change, since it depends on the content inside.

Position – fixed?

Please note we used position: fixed; so that users can scroll down while the open modal window remains always in the middle. I think, in general, that the fixed value can already be safely used, even on mobile devices. However, if you need to account for older phones, try replacing with absolute.

Let's deal with the width

On big screens, a typical open modal window is not only centered, but also limited in width.

Modal (width: 600px; )

However, there are screens that are less than 600px wide. To fix the situation, let's add a maximum width.

Modal ( width: 600px; max-width: 100%; )

Height

Setting up a high-rise building is an even more responsible task. We know that content tends to change. Plus, the centering technique via transform happily trims the edges, without the appearance of a scroll bar. Setting the maximum height will keep us safe a second time.

Modal ( height: 400px; max-height: 100%; )

Overflow

Now that we've dealt with the height, it's time to look at the overflow property. It's common to use an overflow value directly in .modal, however, there are two problems with this:

• We may want to use elements that shouldn't scroll
• Overflow will crop the shadow we will use.

I would suggest using an inner container:

Considering that we will have content that needs to be scrolled, we need to set the height. There are several options. Here is one of them:

Modal-guts ( position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* padding */ padding: 20px 50px 20px 20px; /* allow scrolling */ overflow: auto; )

Buttons

The idea of ​​using modal windows is to force some action before anything is done. Making the window's close button visible in any state doesn't seem like a bad idea.

Close

Let's deal with darkening

A regular modal window is made with a completely dimmed background. This is useful for several reasons:

• it may darken the rest of the screen
• can prevent clicks/interaction with content around the modal window
• Can be used as a giant close button

Typical usage example:

.modal ( /* everything we have already described above */ z-index: 1010; ) .modal-overlay ( z-index: 1000; position: fixed; top:0; left:0; width: 100%; height: 100%; )

Close with class, not open with class

I've noticed a common occurrence where the .modal class is hidden by default, like display: none; Then, to open, add the class .modal.open (display: block;)

However, this could be bad because your modal might be display: flex; and display: block; will rewrite it.

Modal ( .display: flex; ) .modal.closed ( display: none; )

Let's add JavaScript var modal = document.querySelector("#modal"), modalOverlay = document.querySelector("#modal-overlay"), closeButton = document.querySelector("#close-button"), openButton = document.querySelector(" #open-button"); closeButton.addEventListner("click", function())( modal.classList.toggle("closed"); modalOverlay.classList.toggle("closed"); )); openButton.addEventListner("click", function())( modal.classList.toggle("closed"); modalOverlay.classList.toggle("closed"); ));

A modal window is a container that, when a link is clicked, pops up and provides some information. I think many are already familiar with it, but if not, watch the demo version to understand what it is. Now there are a huge number of them and each works in its own way. For example, there are completely standard ones that ask you to perform some action, in in this example confirmation. Or, for example, another option, when you first visit the site, which will actually be suitable for various subscriptions to groups in in social networks. There are modal windows on the net CSS, well, I would like to take this share JavaScript, since it makes it more interesting and works well in all browsers.

STEP ONE. JavaScript code.

To launch a modal window, you need to pass the value to the function window.onload. In which we will pass two identifier elements " a" And " b".

//passing elements by id "a" and "b" window.onload = function() ( a = document.getElementById("a"); b = document.getElementById("b"); )

Then we write the function " showA", which will show the modal window and pass to the elements " a" And " b"styles, namely we set the transparency, width and blocking of the window if the link was not clicked" open".

//show the window of the function "showA" function showA() ( //Set transparency and block the display //of element "b" b.style.filter = "alpha(opacity=80)"; b.style.opacity = 0.8; b .style.display = "block"; // Set the blocking and top padding to 200px //of the "a" element a.style.display = "block"; a.style.top = "200px"; )

After opening the modal window, we need to somehow close or hide it later, for this we write the function " hideA"which will hide the modal window and assign styles to it for the elements" a" And " b".

//Call the function "hideA", which will hide //the window for elements "a" and "b" function hideA() ( b.style.display = "none"; a.style.display = "none"; )

Full code.

//passing elements by id "a" and "b" window.onload = function() ( a = document.getElementById("a"); b = document.getElementById("b"); ) //showing the function window " showA" function showA() ( //Set transparency and block the display //of element "b" b.style.filter = "alpha(opacity=80)"; b.style.opacity = 0.8; b.style.display = " block"; // Set the blocking and top margin to 200px // of the "a" element a.style.display = "block"; a.style.top = "200px"; ) //Call the "hideA" function, which will hide //window for elements "a" and "b" function hideA() ( b.style.display = "none"; a.style.display = "none"; )

STEP TWO. HTML code.

Open

In the tag "div" indicate the identifier " a", which will interact with the styles CSS and with code JavaScript. Next we add another tag " div" and give it an identifier " windows", which will act as markup inside the modal window container.

Inside we indicate a link that will be " close"modal window, also give it a style" pages" and give it a default style " float: right", that is, we will display a link to close the modal window in the upper right corner.

Close

We register the identifier " b", which will hide the window.

Full code.

Open close

STEP THREE. CSS code.

Required styles CSS, without which the modal window will not work correctly, or rather, it will not work or display information correctly at all.

And so the first required style regarding position, in this example is fixed. It allows you to display a modal window while still limiting it to a fill border. By using z-index we specify how much the modal window is identified after the link is clicked" open", and " close". Also display: none, which allows you to hide the modal window until the link is clicked.

#b ( position:fixed; top:0; left:0; right:0; bottom:0; display:none; background: gray; z-index:1; ) #a ( border:1px solid black; position:fixed ; background: #eff7ff; z-index:3; display:none; ) #windows ( padding:5px; width: 500px; height: 300px; border: 2px solid blue; ) a.pages ( background: #97cdff; color: white; padding: 4px; text-decoration: none; ) a:hover.pages ( background: red; color: white; padding: 4px; text-decoration: none; )

Thank you all so much for your attention!

A modal window that is simple in function and is entirely made in pure CSS where you can put it 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. It is also made by default in a light shade, where there is a button in the upper right corner 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 a description or operators in it, which can display different categories, such as statistics or an 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 make pure CSS on 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 is working fine: