asked on

Help with Facebook-Style MooTools Modal Box

I want to open Google's website inside this modal box:
http://davidwalsh.name/dw-content/facebook-modal.php

My code does not work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<script src="http://davidwalsh.name/dw-content/mootools-1.2.1.js" type="text/javascript"></script>
<script type="text/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');
	});
});

</script>
<link rel="stylesheet" type="text/css" media="all" href="smoothbox.css" />
</head>
<body>
<h1> Hello World </h1>

<a id="fb-trigger" href="http://www.google.com/">Example 2</a>

</body>
</html>

Open in new window

leakim971

You need the css and table part.
My mame copy/cut :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<style type="text/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; }
.info		{ width:280px; float:left; font-size:11px; color:#666; }
.info b	{ color:#000; }
.image	{ width:200px; float:left; margin-right:10px; }
 
	</style>
<script src="http://davidwalsh.name/dw-content/mootools-1.2.1.js" type="text/javascript"></script>
<script type="text/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');
	});
});

</script>
<link rel="stylesheet" type="text/css" media="all" href="smoothbox.css" />
</head>
<body>
<h1> Hello World </h1>

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

	<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>hankknight</span></h2> 
						<div class="dialog_content"> 
							<div class="dialog_summary">WWW.GOOGLE.COM</div> 
							<div class="dialog_body"> 
								<div class="ubersearch search_profile"> 
									<div class="result clearfix"> 
										<div class="image"> 
										</div> 
										<div class="info"> 
		<iframe src="http://www.google.fr" height="800" width="480"></iframe>
										</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> 
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial