Jquery popup window with dimming. Create a jQuery popup modal window. jQuery modal windows

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

Let's see how to do this:

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

• href - #?w=500 indicates the width of the window
• rel – unique attribute for each window
• class="poplight" – class for displaying a pop-up window

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 rel attribute of the tag
This will link the link and popup together.

Heading

Any text you want

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

For greater clarity, I have written down some explanations for the style parameters of our window. Since popup windows can have different sizes, we do not specify the edges of the window in the CSS popup_block; calculating the required size is exactly 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; )

With the formation of the window and its appearance With using css, I think there won’t be any special difficulties. You can register styles directly on HTML page, between the and tags, or you can put it in a separate file of your styles, usually this is a style.css file, or something like that.

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

Well, we'll move on. You can do the most latest version JQuery from the library website, or use a separate file located in the depths of Google, connecting it to the document, in the section before the closing tag, placing the following line:

In the next step, we will look at the filling 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.

$(document).ready(function())( //When clicking on a link with poplight class and href 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 //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 (vertical and horizontal) - we add 80 to the height / width, taking into account padding + frame width defined in css var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("#" + popID).width() + 80) / 2; //Set the indentation value $("# " + popID).css(( "margin-top" : -popMargTop, "margin-left" : -popMargLeft )); //Add a translucent darkening background $("body").append(""); //div the container will be listed before the tag. $("#fade").css(("filter" : "alpha(opacity=80)")).fadeIn(); //layer translucency, filter for stupid 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; )); ));

Most likely, you have already seen a pop-up message on the Internet more than once. modal window- 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.

$(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();
});
});

Modal windows are an integral part of modern web design; with their help, the developer can resort to the method of looping on one page and not redirecting the visitor to secondary pages. In this tutorial we'll look at how to create awesome modal windows with blurred backgrounds for your website using jQuery and CSS3. Thanks to these rules, we will create a blurred background when the window appears, which will tie the visitor’s eye only to the necessary information on the site.

The best economic news is only here: Drobakha

The window animation will be set in such a way that when you click on the button to appear, the window will animate from top to bottom, and the background blur will automatically increase.

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

Heading

Description

Tabs are a very interesting and convenient thing when creating a website; they allow you to properly organize information, while saving some space on the site.

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

Now let's move on to styling, the first step will be the button class, which will be responsible, as you guessed, 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; )

The styles are quite simple, they are stored in a separate file and should not cause difficulties when editing them for a developer who has at least once encountered CSS.

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

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

The result is wonderful modal windows that are pleasing to the viewer's eye and don't clutter up your design.