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 the important place in 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 markupThe 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 X Modal window
An example of a simple modal window that can be created using CSS3.
It can be used in a wide range, from displaying messages to registering forms.
StylesCreate 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 display mode of the element, so our modal window will be displayed when the link is clicked. 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 windowNow 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.
Modals, overlays, dialogs, whatever you call them, it's time to rethink this UI pattern. When they first came onto the scene, modals were an elegant solution to a user interface problem. First, they simplify the user interface. Secondly, saving screen space. Since then, designers have readily embraced modals, and some have taken them to the extreme. Modals have become today's version of the dreaded pop-up window. Users find modal windows annoying and have learned to instinctively and automatically close them.
Definition:A modal window is an element that sits on top of the main application window. It blocks the main window, but leaves it visible behind the child modal window. Users must interact with the modal window before they can return to parent application. — Wikipedia
UsageYou can use a modal window whenever you need:
Attract the user's attentionUse when you want to interrupt the user's current task to draw their attention to something more important.
Requires user inputUse when you want to get information from the user. For example, a registration and authorization form.
Show additional information in contextUse if you want to show additional information without losing the context of the parent page. For example, showing larger images or videos.
Show additional information (out of context)Use when you want to show information not directly related to the parent page or other parameters “independent” of other pages. For example, notifications.
Note: Do not use modals to display error messages, task success messages, or warning messages. Leave them on the page.
Anatomy of a modal windowPoorly implemented overlays can interfere with task completion. To ensure your modal window doesn't disturb users, consider the following:
1.Escape hatchGive users a way to escape by giving them a way to close the modal window. This can be achieved in the following ways:
- Cancel button
- Close button
- Escape key
- Click outside the window
Accessibility tip: Every modal window should have an accessible keyboard control to close that window. For example, the escape key should close the window.
2. TitleGive the user context with a modal title. This allows users to know where he/she is because they have not left home page.
After clicking the Tweet button — Modal header: Create a new tweet. Gives context. Tip: The button label (which launches the modal window) and the modal title must match
3. ButtonButton labels should contain clear names. This applies to any button. For modal windows, the 'close' button should be represented as a 'close' button icon or an 'x'.
Invision has clear button icons Note: Don't make the button icon confusing. If the user tries to cancel an action and the modal window pops up with ANOTHER cancel button, confusion ensues. “Am I canceling the cancellation? Or do I continue it?”
4. Determination of size and locationA modal window shouldn't be too big or too small, you just want it to be the right size. The goal is to preserve context, so the modal window should not take up the entire screen. The content must match the model window. If a scrollbar is required, you can create a new page.
- Location — at the top of the screen, because in mobile form The modal window may get lost if placed below it.
- Size — Do not use more than 50% of the model window screen.
When you open a modal window, use the lightbox effect (darken the background). This draws attention to the modal window and indicates that the user cannot interact with the parent page.
Accessibility tip: Set keyboard focus to the modal window.
6. The user launches a modal windowDon't surprise users with a pop-up modal window. Let a user action, such as clicking a button, following a link, or selecting an option, trigger a modal window. Self-opening modal windows can surprise the user and cause them to close quickly.
Modal window caused by pressing the Log In button Modal windows in mobile devices
Modals and mobile devices generally don't work well together. Viewing content is difficult because modals are too large, take up too much screen space, or are too small. Add elements such as a device keyboard and nested scrollbars. Users can only move their fingers and zoom, trying to catch the modal window field. There are better alternatives for modal windows, so they should not be used on mobile devices.
A Well Made Modal — Facebook Accessibility 
When creating modal windows, don't forget to add accessible keyboard controls. Consider the following:
Opening a modal window — the element that brings up the dialog box must be accessible from the keyboard.
Moving focus to a dialog box — When a modal window is open, the keyboard focus should be moved to the beginning of the dialog box.
Controlling Keyboard Focus — When focus is moved to a dialog box, it should be “locked” inside it until the dialog box is closed.
Closing a Dialog — Every modal window must have an accessible keyboard control to close that window.
ARIAThe Accessible Rich Internet Applications (ARIA) standard defines ways to improve the accessibility of web content and web applications.
The following ARIA tags can be useful when creating an accessible modal window: Role = “dialog”, aria - hidden, aria - label
Also, be aware of users with low vision. They can use screen magnifiers on monitors to enlarge screen content. After zooming in, the user can only see part of the screen. In this case, modal windows will be displayed in the same way as on mobile devices.
ConclusionIf people have learned to automatically try to close modal windows, why would you want to use them?
Catching the user's attention, maintaining context, and simplifying the user interface are the big benefits of modal windows. However, they also have disadvantages as they interrupt the user experience and make it impossible to interact with the parent page by hiding the content behind a modal window. A modal window may not always be the answer. When choosing, consider the following:
Checklist
- When do we show modal windows?
- How do we display modal windows?
- What do modal windows look like?
- What information do we provide and collect?
There is an alternative UI component for modal windows: non-modal or known as toast (a term used by Microsoft and Google in Material Design). Read my next post to find out more.
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 with using JavaScript using the alert() method.
Popup windowThe 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 none value of the display property 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; bottom: 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:
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; color: #0000cc; position: 0; bottom: 0; (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 windowTo 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; left: 0; margin: auto; ) #window: target (display: block;) Call popup
The next step in creating a full-fledged modal window is to add a button that will hide our window. We will make a button from a regular link, adding it to ours and designing 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; left: 0; margin: auto; ) #window: target (display: block;) ; padding: 0 12px; text-decoration: none; font-size: 14pt; .close:hover (background: #e6e6ff;)
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 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; text-align: 15px; border-radius: 10px; absolute: 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; background: #f2f2f2; cursor: pointer; .close: hover (background: #e6e6ff;) Popup!
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).
In the article about creating a modal window using CSS, we looked at what a modal window is and why it is needed. We also created a window using only css. In this article I will describe how to create a javascript modal window. More specifically, we will use the jquery library to create.
And so let's start creating a modal window in jquery. To complicate the problem, let us set the following condition. We will need to create a responsive modal window. And adaptability will consist in the fact that when the screen size decreases, the window will also decrease. Let's start creating an adaptive jquery modal window with html markup.
Click here! X Request a call
I think everything is clear with the code. We have a wrapper.wrapper, where the content of our site is located. There is a button for calling a modal window with the id gowindow, the window itself with the id modal_window and an overlaying layer myoverlay. Now let's write css styles.
Wraper ( width: 100%; margin: auto; width: auto;/*same as 100%*/ max-width: 960px;/*maximum wrapper width*/ border: 1px solid #000; background-color: # F5F9FB; ) .button( /*-------*/ ) #modal_window ( width: 34%;/*for responsiveness*/ height: 300px; border-radius: 10px; border: 3px #fff solid; background : #e0e0e0; margin-top: -30%; margin-left: 33%; display: none; /*full transparency for animation */ z-index: 5000; /*window should be the top layer*/ padding-top: 20px; text-align: center; position: relative; ) #modal_window #window_close ( width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block; ) #myoverlay ( z-index: 3000; /*above all layers but below the window */ position: fixed; /*to overlap the site*/ background-color: #000; opacity: 0.5; width: 100%; height: 100 %; /* completely to the screen */ top: 0; left: 0; display: none )
Let's describe the css code. We set block.wrapper to be adaptive, it changes depending on the screen size but not more than 960px. I won't show the button code. We set the width of the #modal_window window as a percentage, the width will depend on the width of the .wrapper. To center the window, set the margin to 33%. It is calculated as 50%-17%, where 17% is half the width of the window. We hide the window with the properties display: none and opacity: 0. With the code #window_close and #myoverlay, I think everything is clear. Let's now write the jquery code. We will assume that jqery is already connected.
$(document).ready(function() ( $("#gowindow").click(function())(//click on the button $("#myoverlay").fadeIn(400, //show the overlay layer function() ( $("#modal_window") .css("display", "block") //make the window visible.animate((opacity: 1, top: "50%"), 200); //increase the transparency, the window is smooth moves out )); )); /* remove the window */ $("#window_close, #myoverlay").click(function())( //click on the overlapping layer or cross $("#modal_window") .animate((opacity : 0, top: "45%"), 200, //transparency is on, the window goes up function())( $(this).css("display", "none"); //make the window invisible $("# myoverlay").fadeOut(400); //remove the overlap layer )); )); ));
I think the Js code does not need explanation, since I commented it quite well. That's all I think, so let's sum it up. We made a simple jquery responsive modal window
3. Example of a jQuery modal window called from a link (from Demo)
Most likely, you have already seen a pop-up modal window on the Internet more than once - registration confirmation, warning, reference information, file download and much more. In this tutorial I will offer several examples on how to create the simplest modal windows.
Creating a simple pop-up modal window Let's start looking at the code for a simple modal window that will immediately appearjQuery code
$(document).ready(function()
{
alert("Text in pop-up window");
});
Paste the code anywhere in the body of your page. Immediately after the page loads, without any commands, you will see a window that looks like this:
But the following code will be executed after the entire page is loaded into the browser. In our example, after loading the page with images, a simple pop-up window will pop up:
$(window).load(function()
{
alert("Page has completed loading!)");
});
You can often see that the login and registration forms are located in such windows. Let's get down to business
First, let's write the html part. We place this code in the body of your document.
Calling a modal window
Modal window text
Close
Text in a modal window.
CSS code. Either in a separate css file, or in the head.
body (
font-family:verdana;
font-size:15px;
}
.link (color:#fff; text-decoration:none)
.link:hover (color:#fff; text-decoration:underline)
#mask (
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes.window (
position:absolute;
left:0;
top:0px;
-top: 40px;
width:440px;
height:200px;
display:none;
z-index:9999;
padding: 20px;
overflow: hidden;
}
#boxes #dialog (
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
.top(
position:absolute;
left:0;
top:0;
width:370px;
height:30px;
background: #0085cc;
padding: 8px 20px 6px 10px;
}
.close(
float:right;
}
.content(
padding-top: 35px;
}
In the jQuery code, we will focus on the position of the modal window and the mask, in our case the gradual darkening of the background.
Attention! Don't forget to include the library in the head of the document!
Connecting the library from the Google website. Well, the jQuery code itself.
jQuery code
$(document).ready(function() (
$("a").click(function(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#mask").fadeIn(1000);
$("#mask").fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) (
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(function () (
$(this).hide();
$(".window").hide();
});
});