Howtomakeacompletelyreusablejquerymodalwindow

InthistutorialwewillcodeamodalwindowwithjQuerythatiscompletelyreusable,sowecanput
multiplemodalwindowswithoutmakingaspecificcodingforit.
HTML
1.
2.
3.
4.
5.
6.
7.
8.
9.

<center><h1>ModalWindowDemo</h1></center>

<p><aclass='activate_modal'name='first_window'href='#'>Firstmodalwindow.</a></p>
<p><aclass='activate_modal'name='second_window'href='#'>Secondmodalwindow.</a></p>

<divid='mask'class='close_modal'></div>

<divid='first_window'class='modal_window'>Thisisthefirstmodalwindow</div>
<divid='second_window'class='modal_window'>Welcometothesecondmodalwindow</div>

Quite easy, we have an element that will trigger the specific modal window. We are getting the modal
window id from the name attribute of the trigger element. Its importnat that the mask goes after the
normal content and after the mask we have our modal window(s).

CSS
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

#mask{
position:absolute;/*important*/
top:0px;/*startfromtop*/
left:0px;/*startfromleft*/
height:100%;/*coverthewholepage*/
width:100%;/*coverthewholepage*/
display:none;/*don'tshowit'*/

/*stylingbellow*/
backgroundcolor:black;
}

.modal_window{
position:absolute;/*importantsowecanpositionitoncenterlater*/
display:none;/*don'tshowit*/

/*stylingbellow*/
color:white;
}

/*styleaspecificmodalwindow*/
#modal_window{
padding:50px;
border:1pxsolidgray;
background:#246493;
color:black;
}

JQuery
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.

$(document).ready(function(){

//gettheheightandwidthofthepage
varwindow_width=$(window).width();
varwindow_height=$(window).height();

//verticalandhorizontalcenteringofmodalwindow(s)
/*wewilluseeachfunctionsoifwehavemorethen1
modalwindowwecenterthemall*/
$('.modal_window').each(function(){

//gettheheightandwidthofthemodal
varmodal_height=$(this).outerHeight();
varmodal_width=$(this).outerWidth();

//calculatetopandleftoffsetneededforcentering
vartop=(window_heightmodal_height)/2;
varleft=(window_widthmodal_width)/2;

//applynewtopandleftcssvalues
$(this).css({'top':top,'left':left});

});

$('.activate_modal').click(function(){

//gettheidofthemodalwindowstoredinthenameoftheactivatingelement
varmodal_id=$(this).attr('name');

//usethefunctiontoshowit
show_modal(modal_id);

});

$('.close_modal').click(function(){

//usethefunctiontocloseit
close_modal();

});

});

//THEFUNCTIONS

functionclose_modal(){

//hidethemask
$('#mask').fadeOut(500);

//hidemodalwindow(s)
$('.modal_window').fadeOut(500);

}
functionshow_modal(modal_id){

//setdisplaytoblockandopacityto0sowecanusefadeTo
$('#mask').css({'display':'block',opacity:0});

//fadeinthemasktoopacity0.8
$('#mask').fadeTo(500,0.8);

//showthemodalwindow
$('#'+modal_id).fadeIn(500);

66. }

Final words
And thats it. We made a modal window function with jquery we can easily use for multiple modal windows
on the same page. Also whats important is that you can trigger the modal window with any elements, just
put class activate_modal to it and name attribute that fits the ID attribute of the modal window.