Popup with fading background with jQuery

Many of us have come across pop-up windows when the background gradually fades out. The user's gaze involuntarily focuses only on that part of the screen where something is required from this user. Reasonably helpful, isn't it?

Of course, I do not pretend to any novelty, and this note will be more useful for beginners with jQuery (which I myself am) than for people who have significant experience with this javascript framework.

Example

To post an example - I got an account on yandex. I hope that they will not be banned if there are many views. So, what we want to get in the end, you can see here .
')

Description

After clicking on a link on our website, a popup window is displayed to the user, requiring him to take some kind of action (for example, fill out and send the form). At the same time, the rest of the page around this window fades out and hides behind a translucent dark background, visually moving away to the background. The user enters data and sends the form, or rejects it, and then returns to the page where it was previously.

Implementation

First we need the latest version of the jQuery library (at the time of writing, version 1.3.2 is available).
Next, we place two blocks at the beginning of our markup:

• "Opaco" - it will be a dark layer that will hide the excess around the window;
• "Popup" - this will be the block into which we insert the necessary content.

< div id ="opaco" class ="hidden" ></ div >
< div id ="popup" class ="hidden" ></ div >

* This source code was highlighted with Source Code Highlighter .

Next, we need to add the links and forms themselves, which will be hidden by default:

error form:

< div class ="user-actions" >
< p class ="bug" >< a href ="#" onCLick ="showPopup('bug'); return false;" > ! </ a ></ p >
</ div >

< div id ="popup_bug" class ="hidden" >
< div class ="bug" >
< form action ="#" class ="bug" >
< h3 > a </ h3 >
< div class ="form_error" ></ div >
< p > , : </ p >
< input type ="text" />
< p > : </ p >
< textarea rows ="5" cols ="30" ></ textarea >
< input type ="button" value ="" onclick ="closePopup(); return false;" />
< input type ="button" value ="" onclick ="closePopup(); return false;" />
</ form >
</ div >
</ div >

* This source code was highlighted with Source Code Highlighter .

For example, we assign an action to both buttons — close the form (closePopup ()).

feedback form:

< div class ="user-actions" >
< p class ="reference" >< a href ="#" onCLick ="showPopup('reference'); return false;" > ! </ a ></ p >
</ div >

< div id ="popup_reference" class ="hidden" >
< div class ="reference" >
< form action ="#" >
< h3 > </ h3 >
< div class ="form_error" ></ div >
< p > : </ p >
< textarea rows ="5" cols ="30" ></ textarea >
< input type ="button" value ="" onclick ="closePopup(); return false;" />
< input type ="button" value ="" onclick ="closePopup(); return false;" />
</ form >
</ div >
</ div >

* This source code was highlighted with Source Code Highlighter .

So, now you can proceed to the functions themselves display and close the pop-up window. It is logical to start with the display:

//open pop-up
function showPopup(popup_type)
{
//when IE - fade immediately
if ($.browser.msie)
{
$( '#opaco' ).height($( document ).height()).toggleClass( 'hidden' );
}
else
//in all the rest browsers - fade slowly
{
$( '#opaco' ).height($( document ).height()).toggleClass( 'hidden' ).fadeTo( 'slow' , 0.7);
}

$( '#popup' )
.html($( '#popup_' + popup_type).html())
.alignCenter()
.toggleClass( 'hidden' );

return false ;
}

* This source code was highlighted with Source Code Highlighter .

The first part of the function processes the block with id = "opaco". First of all, this block is assigned a height equal to the entire document, using the jquery method height . It is necessary to darken even that part of the page, which is under the scroll. And here we use two types of the method at once - if we don’t pass an argument, then we simply get the current height of the object (we have $ (document) .height () in the example), and if we pass the argument, then we assign it to the object we produce the action given the height (in our example, the object $ ('# opaco')).

Now we are sure that the '#opaco' block covers the entire document and display it by removing the 'hidden' class ( toggleClass ('hidden')).
Depending on the browser - we do blackout: if IE - then there it will not be possible to do a smooth attenuation (and we don’t even try), but in all other cases, we gradually darken the block using the fadeTo ('slow', 0.7) method .

The second half of the function processes the next block — id = “popup”.
First of all, we fill this block with the content we need, depending on what value is passed to the function.
With the last action we display this block, again removing the class 'hidden'.

But what we are doing in the middle is clear from the title that we align the block in the center. Indeed, since we can have several different potential for displaying blocks on the page and all of them can be of different height and width depending on the content, for each block so that it is in the center of the screen - we need to apply different indents.

alignCenter is a method defined by us, it is not in the standard jQuery package. Determining your method is very simple:

//additional properties for jQuery object
$( document ).ready( function (){
//align element in the middle of the screen
$.fn.alignCenter = function () {
//get margin left
var marginLeft = Math.max(40, parseInt($(window).width()/2 - $( this ).width()/2)) + 'px' ;
//get margin top
var marginTop = Math.max(40, parseInt($(window).height()/2 - $( this ).height()/2)) + 'px' ;
//return updated element
return $( this ).css({ 'margin-left' :marginLeft, 'margin-top' :marginTop});
};
});

* This source code was highlighted with Source Code Highlighter .

First of all, it is necessary to determine it after the entire DOM document is loaded by the browser, for this we use the jQuery method $ (document) .ready () .

Inside our method, we first find the indent above and the indent on the left using a simple formula. For this we need the screen size of the client and the size of our pop-up window. A useful feature of jQuery here is the ability to access the object to which we are going to apply our method, through $ (this). Thus, depending on the size of the pop-up block, we will dynamically calculate the necessary indents. Just in case, if the pop-up block is very large or the screen size is very small - we set the minimum padding to 40px, so as not to leave the left edge of the screen.

Well, in the end we need to apply these new indents, which we do through the css ({'margin-left': marginLeft, 'margin-top': marginTop}) method.

With the mapping we finished, it remains for a small one - to close the window when the user finishes working with it:

//close pop-up box
function closePopup()
{
$( '#opaco' ).toggleClass( 'hidden' ).removeAttr( 'style' );
$( '#popup' ).toggleClass( 'hidden' );
return false ;
}

* This source code was highlighted with Source Code Highlighter .

First we add the class 'hidden' to both blocks, hiding them. Additionally, we still have to remove the style attribute from the block with id = "opaco", since The fadeTo and height methods that we used earlier are implemented by adding exactly this attribute to the element.

About CSS - it is worth noting that we hung z-index: 10 on the '#opaco' block so that it covers all other elements. And on top of '#opaco' we will have a popup window, which we assigned to z-index: 11.

I hope someone will be useful.

UPD moved to jQuery Blog.

UPD2 at the suggestion of Auru made an indication of the popup independent jQuery method, the same example can be found here .

To do this, add the togglePopup () method:

$.fn.togglePopup = function (){
//detect whether popup is visible or not
if ($( '#popup' ).hasClass( 'hidden' ))
{
//hidden - then display
//when IE - fade immediately
if ($.browser.msie)
{
$( '#opaco' ).height($( document ).height()).toggleClass( 'hidden' );
}
else
//in all the rest browsers - fade slowly
{
$( '#opaco' ).height($( document ).height()).toggleClass( 'hidden' ).fadeTo( 'slow' , 0.7);
}

$( '#popup' )
.html($( this ).html())
.alignCenter()
.toggleClass( 'hidden' );
}
else
{
//visible - then hide
$( '#opaco' ).toggleClass( 'hidden' ).removeAttr( 'style' );
$( '#popup' ).toggleClass( 'hidden' );
}
};

* This source code was highlighted with Source Code Highlighter .

that is, in effect, transferred the showPopup and closePopup functions to this method.

You can call this window by specifying the name of the block that we want to display and this method, for example:

< a href ="#" onCLick ="$('#popup_bug').togglePopup(); return false;" > ! </ a >

* This source code was highlighted with Source Code Highlighter .

clicking on the link will open the popup.

And in the pop-up window itself, we will attach the exact same action to the close button, only in this case, the popup will close:

< input type ="button" value ="" onclick ="$('#popup_bug').togglePopup(); return false;" />

* This source code was highlighted with Source Code Highlighter .

UPD3 according to the advice of dshster reworked a little calculation of the coordinates so that the block was centered in the center when the browser window was resized. An example can be found here .

To do this in CSS properties '#popup' add:

left:50%;
top:50%;

And in the alignCenter () method, we consider the negative margin as half the width of the block at the time of opening:

$.fn.alignCenter = function () {
//get margin left
var marginLeft = - $( this ).width()/2 + 'px' ;
//get margin top
var marginTop = - $( this ).height()/2 + 'px' ;
//return updated element
return $( this ).css({ 'margin-left' :marginLeft, 'margin-top' :marginTop});
};

* This source code was highlighted with Source Code Highlighter .

UPD4 had a couple of comments, which is good when clicking on a dark background - you need to close the window. I agree, it would be convenient. Works here .

All we need for this is to display the togglePopup method on the click event on the '#opaco' block when the window is displayed, and to untie this action when the window is closed.

It helps if you can bind handlers with a chain so that you do not have to look for the necessary DOM object once again. Add an onclick event:

//when IE - fade immediately
if ($.browser.msie)
{
$( '#opaco' ).height($( document ).height()).toggleClass( 'hidden' )
.click( function (){$( this ).togglePopup();});
}
else
//in all the rest browsers - fade slowly
{
$( '#opaco' ).height($( document ).height()).toggleClass( 'hidden' ).fadeTo( 'slow' , 0.7)
.click( function (){$( this ).togglePopup();});
}

* This source code was highlighted with Source Code Highlighter .

and when closing - untie:

$( '#opaco' ).toggleClass( 'hidden' ).removeAttr( 'style' ).unbind( 'click' );

* This source code was highlighted with Source Code Highlighter .