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的Modal框是最好的模态框。 它轻巧，微妙且非常时尚。 我已经拍摄了Facebook的图像和CSS，并将其与MooTools的强大功能结合在一起以复制效果。
View Demo
观看演示
意象 (The Imagery)
Facebook uses a funky sprite for their modal box. Pretty cool though.
Facebook将时髦的精灵用作其模式框。 虽然很酷。
CSS (The CSS)
/* 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.
大多数CSS都是直接从Facebook的样式表中复制的。 您将在底部看到一些自定义CSS，但这只是我自定义模式框中的内容。
MooTools JavaScript (The MooTools JavaScript)
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');
});
});
Fade in. Fade out. Too easy with MooTools!
淡入淡出。 MooTools太简单了！
View Demo
观看演示
Just because Facebook has more resources than you doesn't mean your site can't look as good as Facebook!
仅仅因为Facebook具有比您更多的资源，并不意味着您的网站看起来不如Facebook！
翻译自: https://davidwalsh.name/facebook-modal-mootools
mootools弹框
相关资源：jdk-8u281-windows-x64.exe
