jquery modal window with blurry background. Blurred background modals with CSS3

Then we need to add a class modal is-active, this class will be responsible for calling the modal window, modal_header is responsible for the title and its styling of the window.

Step 2: CSS

Now let's move on to styling, the first step is the class button, which will be responsible, you guessed it, for the buttons on the site, we set the correct display parameters for it:

Button ( background: none; background-clip: padding-box; display: inline-block; border: 0; user-select: none; -webkit-touch-callout: none; -webkit-appearance: button; -webkit-user -select: none; -moz-user-select: none; -ms-user-select: none; )

Container ( position: relative; margin:0 auto; max-width: 960px; box-sizing: border-box; padding-top: 40px; )

Styles are quite simple, they are stored in a separate file and should not cause difficulties when editing them for a developer who has ever encountered CSS.

Step 3JS

Our last, but no less important, will be the automatic blurring of the background when the menu appears, as well as the clickability of links, small rules will help us with this. JS:

$("body").addClass("is-blurred"); $(".toggleModal").on("click", function (event) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass ("is-blurred"); ));

As a result, we get wonderful modal windows that are pleasing to the eye of the visitor and do not clutter up your design.

It is quite common to see modal windows on websites, and all of them are used for different tasks. In fact, this is a rather powerful tool that allows you to make the site interface more interactive and convenient. For example, modal windows can be used for various forms, such as an authorization form, feedback form, product ordering, and you never know.

In this post, we will 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.

We place the code of the modal window on the page:

As you can see from the markup, the block of the modal itself is a div with the id= attribute modal_form, which contains the 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 block with the id= attribute overlay, which also serves to darken the background. The modal window will be opened by a link, with the class modal.

CSS for the 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 the modal window's underlay ( overlay) we set the size to the width of the screen, fill with transparency, and also hide it by default. special moment with z-index, the modal must have the largest of all elements on the page, and the skin must have the largest of all elements except 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 clicking 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 the cover display function ()( // next 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 transparency function()( // after animation $(this).css("display", "none"); // hide window $("#overlay"). fadeOut(400); // hide background ) ); )); ));

With animate we change the vertical position top as well as transparency opacity, and with the help of 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.

Talking about the various techniques of site building, it would be absurd not to talk about some of the ways to create modal windows. We will not talk about the purpose, usefulness and emerging problems of using pop-up, modal windows. Let's take a look at 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's 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 specifies the width of the window
• rel is a unique attribute for each window
• class="poplight" – class for showing a popup window

See Window in action - Width = 500px

Next, we need to create the 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 the popup together.

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

CSS Layout

For greater clarity, I have written some explanations for the style parameters of our window. Since popups can have different sizes, we do not specify in CSS popup_block the edges of the window, 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;) : 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 with css, I think there will be no special difficulties. Styles can be written directly on HTML page, between tags and, or you can take it to separate file your styles, usually this file style.css, or something like that.

jquery setup

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

Well, we'll move on. you can most latest version jQuery from the library website, or use a separate file hosted in the bowels of Google, connecting it to the document, in the section before the closing tag by placing this line:

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

jquery plugin

$(document).ready(function()( //When clicking on a link with a poplight class and href tag attribute c # $("a.poplight").click(function() ( var popID = $(this).attr("rel"); //we get the window name, it is important not to forget to change the name in the link's rel attribute when adding new ones var popURL = $(this).attr("href"); //get the size from the link's href attribute //query and variables from the href url var query= popURL.split("?"); var dim= query.split( "&"); var popWidth = dim.split("="); //first query string value //Add a close button to the window $("#" + popID).fadeIn().css(( "width": Number(popWidth) )).prepend(""); //Define the margin(margin) for center alignment (vertically and horizontally) - we add 80 to the height/width including padding + border width 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 translucent blackout background $("body").append("

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

Next time I will definitely tell and show with an example, and for sure, many will be interested in learning about other third-party objects in the pop-up window. So stay tuned and stay tuned for updates!

Update: Version dm-modal.js v1.3 (01/15/2017)
Corrected: Replaced deprecated .live() function, using href*=\\# syntax. The plugin now works with current versions jQuery libraries

That's all! I hope you get another useful lesson.

With all respect, Andrew