MooTools ile Facebook tarzı diyalog pencereleri

Bilindiği gibi mootools ve jquery günü kurtaran en büyük yardımcılarımızdan biridir. Bu araçlarla hemen hemen bütün efektleri sitenize uygulayabilirsiniz. Hatta bence gün gelecek bu araçlar flash’ın yerini alacak. Şimdi burada gördüğüm Facebook tarzı diyalog pencerelerinin nasıl yapıldığını size aktaracağım.

Öncelikle son halini görmek isterseniz buraya bakabilirsiniz.

Şimdi nasıl yapıdığını gördüğünüze göre kodlara geçebiliriz:)

Gerekli image dosyası;

Ve kodlar;

/* 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; }

Bu kodları CSS olarak kaydettikden sonra sayfanıza dahil edin.

Bunlarda mootools için gerekli kodlar;

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');
	});
});

Bu kodlarıda .js olarak kaydettikden sonra sayfanıza dahil edin. Bu kodların yanı sıra mootools kodlarınada dahil etmelisiniz.

Demonun kodlarını inceleyecek olursak;
Aşağıdaki kodları kendinize göre düzenlemeniz yeterli.

	<p><a href="#" id="fb-trigger">Click here</a> to show the Facebook-like dialog box.</p><br />

	<div class="generic_dialog" id="fb-modal">
	<div class="generic_dialog_popup" style="top: 125px;">
		<table class="pop_dialog_table" id="pop_dialog_table" style="width: 532px;">
			<tbody>
				<tr>
					<td class="pop_topleft"/>
					<td class="pop_border pop_top"/>
					<td class="pop_topright"/>
				</tr>

				<tr>
					<td class="pop_border pop_side"/>
					<td id="pop_content" class="pop_content">
						<h2 class="dialog_title"><span>David Walsh</span></h2>
						<div class="dialog_content">
							<div class="dialog_summary">You must be friends with David Walsh to see their full profile.</div>
							<div class="dialog_body">
								<div class="ubersearch search_profile">

									<div class="result clearfix">
										<div class="image">
											<span><img class="photo" alt="David Walsh" src="http://profile.ak.facebook.com/v222/282/0/n211704301_1944.jpg"/></span>
										</div>
										<div class="info">
											<p>
												<b>About David Walsh</b><br />David Walsh, Web Developer
											</p>
											<p>

												I'm a 25 year old Web Developer planted in Madison, Wisconsin. I am Founder and Lead Developer for Wynq Web Labs. I don't design the websites, I just make them work.
											</p>
										</div>
										<div class="clear" style="clear:both;"></div>
									</div>
								</div>
							</div>
							<div class="dialog_buttons">
								<input type="button" value="Close" name="close" class="inputsubmit" id="fb-close" />

							</div>
						</div>
					</td>
					<td class="pop_border pop_side"/>
				</tr>
				<tr>
					<td class="pop_bottomleft"/>
					<td class="pop_border pop_bottom"/>
					<td class="pop_bottomright"/>

				</tr>
			</tbody>
		</table>
	</div>
	</div>