homeInterestingDimming the background when popping up a modal window. Blurred background modals with CSS3. Pretty Dialog Boxes
Dimming the background when popping up a modal window. Blurred background modals with CSS3. Pretty Dialog Boxes
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, a form feedback, ordering goods, and you never know.
In this post, we will look at an example of how to make a simple modal window with using jQuery and CSS. Peculiarity this example in 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:
close
Open modal window
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.
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 should have the largest of all the elements on the page, and the cover should have the largest of all the 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 this we get 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 called by link (with Demo)
Most likely, you have already seen a pop-up modal window more than once on the Internet - registration confirmation, warning, reference Information, file upload and more. In this tutorial, I will offer some examples of how to create the simplest modal windows.
Create a simple modal popup
Let's start considering the code of the simplest modal window, which 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 like this:
But the following code will be executed after loading the entire page in the browser. In our example, after loading the page with images, a simple pop-up window will pop up:
Calling a jQuery modal from a link 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
To start, let's write html part. We place this code in the body of your document.
Calling a modal window
Modal window text
close
Text in the 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 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 site. Well, the jQuery code itself.
jQuery Code
Modal windows are an integral part modern web design, using them, the developer can resort to the method of looping on one page and not redirecting the visitor to auxiliary pages. In this tutorial, we'll look at how to create awesome modal windows with a blurred background for a website with using jQuery and CSS3. Thanks to these rules, we will create a blurry background when the window appears, which will tie the visitor's gaze only to the necessary information on the site.
Blurred background modals with CSS3
Economic news is the best 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 automatically increasing the background blur.
Step 1: HTML
We will have a container that will contain: title, description, then we add a class for the button with the class toggleModal to open a modal window:
header
Description
Title for the window
Tabs are a very interesting and convenient thing when creating a site, it allows you to properly organize information, while saving some space on the site.
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:
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.
1. Modal window on jQuery "Simple Modal Box"
2. jQuery plugin "LeanModal"
Display content in modal windows. To see the plugin in action on the demo page, click on the link: Sign Up Form or Basic Content.
3. jQuery Plugin "ToastMessage"
Pop-up messages. Plugin in two versions. In one case, messages disappear on their own, after a certain time, in the second implementation, in order to close the message, you must click on the button.
4. Content that pops up in the modal window
Reveal plugin. To see the plugin in action, click on the "Fire A Reveal Modal" button on the demo page.
5. Pretty Dialog Boxes
Click on the cross on the demo page to see the plugin in action.
6. Mootools Modal Window, MooDialog Plugin
7. jQuery popup bar at the top of the screen
8.jQuery Popup
jQuery plugin for displaying a contact form in a popup window.
10. MooTools "LightFace" Plugin for Implementing Facebook Dialogs
Facebook-style dialog boxes. In addition to static information, you can put images, frames, Ajax requests into windows. Many settings for the plugin, a very powerful tool. Looks very stylish and functional. Follow the links on the demo page to see examples with different content.
11. jQuery modal window
Neat jQuery popup dialog.
12. jQuery Modals
Nice modal popups. Three styles. The demo page has 3 links to call windows.
13. jQuery Modals
Pop-up modal windows of several types. To see the plugin in action, click on the link on the demo page.
15. Pop-up message on top of the page
The message is displayed on top of the page, which, in turn, is dimmed. Click on the "Click me" label on the demo page to see a pop-up message. Clicking on the cross will close it. Implemented with jQuery.
16. Modal window "ModalBox" in javascript
Implementing modern modal dialogs without using popups and page reloads. On the demo page, click on the "Start Demo" button to see how the script works.
17. "Leightbox" plugin using the Prototype library
Plugin for displaying content in modal windows.
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
<
a href=
"#?w=500"
rel=
"popup_name"
class
=
"poplight"
>See Window in action - Width = 500px
a>
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.
header
Any text you like
And so, we figured out the placement of our window on the page, now let's decorate it with the help of 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 .
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 HTML page, between tags
and, or you can put it in a separate file of 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, consider the filling and functions 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 a link with the class poplight and the href attribute of the tag With #$("a.poplight" ) . click(function () ( var popID = $(this) . attr("rel" ) ; //we 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 varquery=popURL. split("?"); var dim= query[ 1 ] . split("&"); var popWidth = dim[ 0 ] . split("=" ) [ 1 ] ; //first query string value// Add a close button to the window$("#" + popID) . fadeIn() . css(( "width" : Number( popWidth ) ) ) . prepend( ""
)
;
//Determine margin(margin) for center alignment (vertically and horizontally) - we add 80 to 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 indent$("#" + 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 dumb IE return false ; ) ) ; //Close the window and dim the 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 ; ) ) ; ) ) ;
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