Popup Layer with shaded background

Use this package to create a modal-like popup layer to show text messages or images on the current window. You can customize any of the aesthetics via css and the content window will stretch vertically and horizontally based on the content. Good to avoid popup blockers and keep the user on the same page.
CSS • HTML • JavaScript

CSS

#prodEnlargeFlyBox {
	position: fixed;
	top:0px;
	left:0px;
	z-index: 998;
	height: 100%;
	width: 100%;
	background-image: url(/store/vault.nsf/flyBoxBackground.png);
	display: none;
}
   
.prodEnlargeBorderWindow {
	text-align: left;
	background-color:#262626;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	padding: 12px;
}
  
.prodEnlargeContainer {
	position: relative;
}
   
div.prodEnlargeCloseButton {
	position:absolute;
	top: -15px;
	right: -18px;
}
   
.prodEnlargeContent {
	background-color: #FFFFFF;
	overflow:hidden;
}

JavaScript functions

function prodEnlarge() {
	var theDetail = document.getElementById('prodEnlargeFlyBox');
	theDetail.style.display="block";
}
 
function prodEnlargeClosePopup() {
	var theDetail = document.getElementById('prodEnlargeFlyBox');
	if (theDetail.style.display=="block") {
		theDetail.style.display="none";
	}
}

HTML link to open the flybox

<a href="javascript:prodEnlarge();">Open FlyBox</a>

HTML for the flybox itself. Can be placed anywhere on the page.

<div id="prodEnlargeFlyBox" style="display:none;">
	<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td align="center">
				<table border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td class="prodEnlargeBorderWindow">
							<div class="prodEnlargeContainer">
								<div class="prodEnlargeCloseButton"><a href="javascript:prodEnlargeClosePopup();"><img src="/store/vault.nsf/flyBoxClose.png" width="28" height="28" alt="Close Button" border="0"></a></div>
								<div class="prodEnlargeContent">
									<table width="225" border="0" cellspacing="20" cellpadding="0">
										<tr>
											<td align="center">CONTENT FOR THE POPUP</td>
										</tr>
									</table>
								</div>
							</div>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</div>

Images/Screenshots:

Attached files
flyBoxClose.png 953 bytes flyBoxBackground.png 109 bytes

Posted by fbrefere001 on Tuesday November 27, 2012