Facebook-Style Modal Box Using MooTools

In my oh-so-humble opinion, Facebook’s Modal box is the best modal box around. It’s lightweight, subtle, and very stylish. I’ve taken Facebook’s imagery and CSS and combined it with MooTools’ awesome functionality to duplicate the effect.
Facebook uses a funky sprite for their modal box. Pretty cool though.

/* from facebook */
.generic_dialog { height:0; left:0;
overflow:visible; position:fixed; /*dw*/ top:0; width:100%; z-index:101;
}
#generic_dialog_iframe { left:0; position:absolute; top:0; z-index:3;
}
.generic_dialog .generic_dialog_popup { height:0; overflow:visible;
position:relative; }
.generic_dialog div.dialog_loading {
background-color:#F2F2F2; border:1px solid #606060; font-size:24px;
padding:10px; }
#generic_dialog_overlay { display:block; left:0;
position:absolute; top:0; width:100%; z-index:100; }
.dialog_body
.dialog_content_img { float:left; margin-right:15px; }
.dialog_body
.dialog_content_txt { float:left; padding-bottom:5px; width:300px;
}
.dialog_body .dialog_content_body { padding-bottom:13px; }
.dialog_body
.form_label { padding-right:5px; }
.dark_dialog_overlay {
background-image:url(facebook-overlay.png); background-repeat:repeat; }
*
html .dark_dialog_overlay { background-color:transparent;
background-image:url(blank.gif); }
.full_bleed .pop_dialog_table
td.pop_content .dialog_body { padding:0; }
table.pop_dialog_table {
border-collapse:collapse; direction:ltr; margin:auto; table-layout:fixed;
width:465px; }
td.pop_topleft, td.pop_topright, td.pop_bottomleft,
td.pop_bottomright { height:10px; overflow:hidden; padding:0 !important;
width:10px !important; }
td.pop_topleft { background:transparent
url(facebook-pop-dialog-sprite.png) no-repeat scroll 0 0; }
td.pop_topright {
background:transparent url(facebook-pop-dialog-sprite.png) no-repeat scroll 0
-10px; }
td.pop_bottomleft { background:transparent
url(facebook-pop-dialog-sprite.png) no-repeat scroll 0 -20px;
}
td.pop_bottomright { background:transparent
url(facebook-pop-dialog-sprite.png) no-repeat scroll 0 -30px; }
td.pop_top,
td.pop_bottom { background:transparent url(facebook-pop-dialog-sprite.png)
repeat-x scroll 0 -40px; }
td.pop_side { background:transparent
url(facebook-pop-dialog-sprite.png) repeat-y scroll -10px 0; }
td.pop_content
{ background-color:white; direction:ltr; padding:0; }
.pop_dialog_rtl
td.pop_content { direction:rtl; }
td.pop_content h2.dialog_title {
background:#6D84B4 none repeat scroll 0 0; border:1px solid #3B5998;
color:white; font-size:14px; font-weight:bold; margin:0; }
td.pop_content
h2.dialog_loading { background:#6D84B4 url(facebook-indicator_white_small.gif)
no-repeat scroll 400px 10px; padding-right:40px; }
td.pop_content h2 span {
display:block; padding:4px 10px 5px; }
td.pop_content .dialog_content {
background:#FFFFFF none repeat scroll 0 0; border-color:#555555;
border-style:solid; border-width:0 1px 1px; }
td.pop_content .dialog_body {
border-bottom:1px solid #CCCCCC; padding:10px; }
td.pop_content
.dialog_summary { background:#F2F2F2 none repeat scroll 0 0; border-bottom:1px
solid #CCCCCC; padding:8px 10px; }
td.pop_content .dialog_buttons {
background:#F2F2F2 none repeat scroll 0 0; padding:8px; text-align:right;
}
td.pop_content .dialog_buttons input { margin-left:5px; }
td.pop_content
.dialog_buttons_msg { float:left; padding:5px 0 0; }
td.pop_content
.dialog_footer { background:#F2F2F2 none repeat scroll 0 50%; }
/* david
walsh custom */
#fb-modal { display:none; }
#fb-close { cursor:pointer;
}
.info { width:280px; float:left; font-size:11px; color:#666; }
.info b {
color:#000; }
.image { width:200px; float:left; margin-right:10px; }

Most of this CSS was copied straight from Facebook’s stylesheets. You’ll see a bit of custom CSS at the bottom but that’s just me customizing the content in the modal box.

window.addEvent('domready',function() {
/* hide using opacity on page load
*/
$('fb-modal').setStyles({
opacity:0,
display:'block'
});
/*
hiders */
$('fb-close').addEvent('click',function(e) {
$('fb-modal').fade('out'); });
window.addEvent('keypress',function(e) {
if(e.key == 'esc') { $('fb-modal').fade('out'); }
});
$(document.body).addEvent('click',function(e) {
if($('fb-modal').get('opacity') == 1 &&
!e.target.getParent('.generic_dialog')) {
$('fb-modal').fade('out');
}
});
/* click to show */
$('fb-trigger').addEvent('click',function()
{
$('fb-modal').fade('in');
});
});

Just because Facebook has more resources than you doesn’t mean your site can’t look as good as Facebook!