Modals with a blurred background in CSS3. Create a jQuery popup modal ToastMessage plugin jQuery

Quite often, you can find modals on websites, and they are all used for different tasks. Indeed, it is quite a powerful tool that allows you to make the site interface more interactive and user-friendly. For example, modal windows can be used for various forms, such as an authorization form, a feedback form, ordering a product, and you never know.

In this post, we'll take a look at an example of how to make a simple modal window using jQuery and CSS. The peculiarity of this example is that it is not required here, well, with the exception of the jQuery library itself.

Place the modal window code on the page:

Open modal window

As you can see from the markup, the block of the modal window itself is a div with an id = attribute modal_form which contains a span element with id = modal_close... This element will serve as a button to close the modal window, in addition, below the block there is a div with the id = attribute overlay, which serves at the same time to darken the background. The modal window will open by reference, with the class modal.

CSS for modal window

#modal_form (width: 300px; height: 300px; border-radius: 5px; border: 3px # 000 solid; background: #fff; position: fixed; top: 45%; left: 50%; margin-top: -150px; margin-left: -150px; display: none; opacity: 0; z-index: 5; padding: 20px 10px;) #modal_form #modal_close (width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block;) #overlay (z-index: 3; position: fixed; background-color: # 000; opacity: 0.8; -moz-opacity: 0.8; filter: alpha (opacity = 80) ; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; display: none;)

For modal_form we set a fixed width and height and then centered the position to the center of the screen. For a modal underlay ( overlay) we set the size to the width of the screen, fill with transparency, and also hide it by default. A special moment with z-index, the modal should have the largest of all the elements on the page, and the cover should have the largest of all but the modal itself.

Now to the most basic, this is the javascript code. For the modal window, two main events will be used, this is its opening - clicking on an element with the class modal, in our case this is a link, and closing the modal window is a click on the cover ( overlay), or click on the close button, in our case it is a span element with id = modal_close.

$ (document) .ready (function () ($ (". modal"). click (function (event) (event.preventDefault (); $ ("# overlay"). fadeIn (400, // animate showing the cover function () (// then show the mod. window $ ("# modal_form") .css ("display", "block") .animate ((opacity: 1, top: "50%"), 200);)); )); // close the modal window $ ("# modal_close, #overlay"). click (function () ($ ("# modal_form") .animate ((opacity: 0, top: "45%"), 200, // decrease opacity function () (// after animation $ (this) .css ("display", "none"); // hide the window $ ("# overlay"). fadeOut (400); // hide the overlay) );));));

With animate we change the vertical position top, as well as transparency opacity, and with this we get an interesting effect. A similar effect is used both when the window is opened and when it is closed. The difference is that the order of applying properties for blocks is changed, thereby visualizing the opening and closing of the window.

3. An example of a jQuery modal window called by reference (with Demo)

Most likely, you have already seen a pop-up modal window on the Internet more than once - registration confirmation, warning, help information, file download and much more. In this tutorial, I will provide some examples of how to create the most basic modal windows.

How to create a simple popup modal

Let's start examining the code of the simplest modal window that will immediately appear
jQuery code

Paste the code anywhere in body Your page. Immediately after loading the page, 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:

Calling jQuery modal window by reference with CSS

The next step is to create modal window when clicking on the link. The background will slowly darken.

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 html part... We place this code in the body of your document.

Calling a modal window

CSS code... Either in a separate css file or in
In the jQuery code, we will focus on the position of the modal and the mask, in this case gradually darkening 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

Talking about various site building techniques, it would be ridiculous not to talk about some of the ways to create modal windows. We will not discuss the purpose, usefulness and emerging problems of using pop-up, modal windows. Let's analyze just one of the many examples of creating such windows.
There are situations when it is not possible to use special plugins, for example, such as and, so it is worth understanding how you can create your own.

Let's see how to do it:

Html

Let's start by adding tags with the following attributes:

• href - #? w = 500 indicates the width of the window
• rel - a unique attribute for each window
• class = "poplight" - class for showing the popup window

< a href= "#?w=500" rel= "popup_name" class = "poplight" >See Window in Action - Width = 500px

See Window in Action - Width = 500px

Next, we need to create inline markup for the popup. You can place it anywhere on the page, for example, at the bottom of the content. Note that the popup id matches the attribute rel tag
This will link the link and popup together.

And so, we figured out the placement of our window on the page, now let's style it with styles, give it, so to speak, a decent look.

CSS Layout

For the sake of clarity, I have written some explanations for the style parameters of our window. Since pop-ups can be of different sizes, we do not specify in the CSS popup_block the edges of the window, to calculate the required size, this is just the task for.

#fade (display: none; / * - hidden by default - * / background: rgba (7, 87, 207, 0.8); position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .80; z-index: 9999; ) .popup_block (display: none; / * - hidden by default - * / background: #fff; padding: 20px; border: 8px solid rgb (134, 134, 134); float: left; font-size: 85%; position: fixed; top: 50%; left: 50%; color: # 000; max-width: 750px; min-width: 320px; height: auto; z-index: 99999; / * - CSS3 box shadow - * /-webkit-box-shadow: 0px 0px 20px # 000; -moz-box-shadow: 0px 0px 20px # 000; box-shadow: 0px 0px 20px # 000; / * - CSS3 corner rounding - * /-webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; ) .popup_block p (font-weight: 400; padding: 0; margin: 0; color: # 000; line-height: 1.6;) .popup_block h2 (margin: 0px 0 10px; color: rgb (43, 43, 43 ); font-weight: 400; text-align: center; text-shadow: 1px 1px 2px # 0D0C0C;) / * form a close button * /.close (background-color: rgba (61, 61, 61, 0.8); border: 2px solid #ccc; height: 25px; line-height: 20px; position: absolute; right: -17px; font-weight: bold; text-align: center; text-decoration: none; padding: 0; top: -17px; width: 25px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border- radius: 50%; -o-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 1px 1px 3px # 000; -webkit-box-shadow: 1px 1px 3px # 000; box- shadow: 1px 1px 3px # 000;) .close: before (color: rgba (255, 255, 255, 0.9); content: "X"; font-size: 12px; text-shadow: 0 -1px rgba (0, 0, 0, 0.9);) .close: hover (background-color: rgba (252, 20, 0, 0.8);) .shadow (box-shadow: 4px 4px 10px # 857373; -webkit-box-shadow: 4px 4px 10px # 857373; -moz-box-shadow: 4px 4px 10px # 857373; padding: 0;) / * - fixed positioning for IE6 - * /* html #fade (position: absolute;) * html .popup_block (position: absolute;)

#fade (display: none; / * - hidden by default - * / background: rgba (7, 87, 207, 0.8); position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .80; z-index: 9999;) .popup_block (display: none; / * - hidden by default - * / background: #fff; padding: 20px; border: 8px solid rgb (134, 134, 134); float: left; font-size: 85%; position: fixed; top: 50%; left: 50%; color: # 000; max-width: 750px; min-width: 320px; height: auto ; z-index: 99999; / * - CSS3 box shadow - * / -webkit-box-shadow: 0px 0px 20px # 000; -moz-box-shadow: 0px 0px 20px # 000; box-shadow: 0px 0px 20px # 000; / * - CSS3 rounding of corners - * / -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;) .popup_block p (font-weight: 400; padding: 0; margin: 0; color: # 000; line-height: 1.6;) .popup_block h2 (margin: 0px 0 10px; color: rgb (43, 43, 43); font-weight: 400; text-align : center; text-shadow: 1px 1px 2px # 0D0C0C;) / * form the close button * / .close (backgro und-color: rgba (61, 61, 61, 0.8); border: 2px solid #ccc; height: 25px; line-height: 20px; position: absolute; right: -17px; font-weight: bold; text-align: center; text-decoration: none; padding: 0; top: -17px; width: 25px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 1px 1px 3px # 000; -webkit-box-shadow: 1px 1px 3px # 000; box-shadow: 1px 1px 3px # 000; ) .close: before (color: rgba (255, 255, 255, 0.9); content: "X"; font-size: 12px; text-shadow: 0 -1px rgba (0, 0, 0, 0.9);) .close: hover (background-color: rgba (252, 20, 0, 0.8);) .shadow (box-shadow: 4px 4px 10px # 857373; -webkit-box-shadow: 4px 4px 10px # 857373; -moz- box-shadow: 4px 4px 10px # 857373; padding: 0;) / * - fixed positioning for IE6 - * / * html #fade (position: absolute;) * html .popup_block (position: absolute;)

With the formation of the window and its appearance using css, I think there will be no particular difficulties. Styles can be written directly on the HTML page, between tags and, or you can put it in a separate file of your styles, usually this is a file style.css, or something like that.

JQuery setup

For the full-fledged work of the modal window, you need to connect jQuery, those who are not familiar with the work of this library can read.

Well, we'll go further. You can use the most recent version of jQuery from the library website, or use a separate file hosted in Google by linking it to the document, in the section before the closing tag

by placing a line like this:

In the next step, we will look at the stuffing and functions of the jquery plugin, to activate our popup window, the code contains some explanations for a better understanding of what we are doing.

JQuery Plugin

$ (document). ready (function () ( // When clicking on the link with the poplight class and the href of the tag attribute with #$ ("a.poplight"). click (function () (var popID = $ (this). attr ("rel"); // get the name of the window, it is important not to forget to change the name in the rel attribute of the link when adding new ones var popURL = $ (this). attr ("href"); // get the size from the href attribute of the link // request and variables from href url var query = popURL. split ("?"); var dim = query [1]. split ("&"); var popWidth = dim [0]. split ("=") [1]; // first value of the query string // Add a close button to the window$ ("#" + popID). fadeIn (). css (("width": Number (popWidth))). prepend ( "" ) ; // Determine the margin (margin) for center alignment (vertically and horizontally) - we add 80 to the height / width, taking into account padding + width of the border defined in css var popMargTop = ($ ("#" + popID). height () + 80) / 2; var popMargLeft = ($ ("#" + popID). width () + 80) / 2; // Set the amount of padding$ ("#" + popID). css (("margin-top": - popMargTop, "margin-left": - popMargLeft)); // Add a semi-transparent shading background$ ("body"). append (" " ) ; // div container will be written before the tag . $ ("# fade"). css (("filter": "alpha (opacity = 80)")). fadeIn (); // layer translucency, filter for dull IE return false; )); // Close the window and darkening background$ (document). on ("click", "a.close, #fade", function () ( // close on click outside the window, i.e. in the background ...$ ("# fade, .popup_block"). fadeOut (function () ($ ("# fade, a.close"). remove (); // fade out)); return false; )); ));

$ (document) .ready (function () (// When clicking on the link with the poplight class and the href of the tag attribute c # $ ("a.poplight"). click (function () (var popID = $ (this) .attr ("rel"); // get the name of the window, it is important not to forget to change the name in the rel attribute of the link when adding new ones var popURL = $ (this) .attr ("href"); // get the size from the href attribute of the link // query and variables from the href url var query = popURL.split ("?"); var dim = query.split ( "&"); var popWidth = dim.split ("="); // first value of the query string // Add a close button to the window $ ("#" + popID) .fadeIn (). css (("width": Number (popWidth))). Prepend (""); // Determine the margin (margin) for center alignment (vertically and horizontally) - we add 80 to the height / width with padding + border width defined in css var popMargTop = ($ ("#" + popID) .height () + 80) / 2; var popMargLeft = ($ ("#" + popID) .width () + 80) / 2; // Set the indent value $ ("# "+ popID) .css ((" margin-top ": -popMargTop," margin-left ": -popMargLeft)); // Add a semi-transparent shading background $ (" body "). append ("

"); // div container will be written before the tag

... $ ("# fade"). css (("filter": "alpha (opacity = 80)")). fadeIn (); // layer translucency, filter for dull IE return false; )); // Close the window and fade background $ (document) .on ("click", "a.close, #fade", function () (// close by clicking outside the window, i.e. on the background ... $ ( "#fade, .popup_block"). fadeOut (function () ($ ("# fade, a.close"). remove (); // fade out)); return false;)); ));

Conclusion:

In general, if you do not go into the jungle and do not load yourself with unnecessary code gibberish, our wonderful modal window is ready to work, and is waiting for your thoughts translated into text, or any other useful information.
For those who would like to use a modal window to place videos or large-scale images in it, I nevertheless advised to use special plugins such as, since the above example of a modal window is intended more for light and not very heavy information, although if desired, this is not a problem ...

Next time I will definitely tell and show you with an example, and for sure, many will be interested in learning about other third-party objects in the pop-up window. So don't get lost on the web and stay tuned!

Update: Version dm-modal.js v1.3 (15.01.2017)
Fixed: Replaced deprecated .live () function using href * = \\ # syntax. The plugin now works with the latest versions of the jQuery library

That's all! I hope you got another useful tutorial.

With all respect, Andrew

Modals are an integral part of modern web design, with the help of them, the developer can resort to the method of looping on one page and not throwing the visitor to secondary pages. In this tutorial, we'll take a look at how to create awesome blurred background modals for your website using jQuery and CSS3. Thanks to these rules, we will create a blurred background when a window appears, which will bind the visitor's gaze only to the necessary information on the site.

CSS3 Blurred Background Modals

The best economic news is only here: Drobakha

The animation of the window will be set in such a way that when you click on the appearance button, the window will animate from top to bottom, while the background blur is automatically enhanced.

Step 1. HTML

We will have a container that will contain: title, description, then we add a class for a button with a class toggleModal to open a modal window:

Heading

Description

Open article