<a href="javascript:popup('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.')">Popup!</a>
		<div id="dialog-overlay"></div>
		<div id="dialog-box">
			<div class="dialog-content">
				<div id="dialog-message"></div>
				<a href="#" class="button">Close</a>
			</div>
		</div>
		

#dialog-overlay {
		/* set it to fill the whil screen */
		width:100%;
		height:100%;
		/* transparency for different browsers */
		filter:alpha(opacity=50);
		-moz-opacity:0.5;
		-khtml-opacity: 0.5;
		opacity: 0.5;
		background:#000;
		/* make sure it appear behind the dialog box but above everything else */
		position:absolute;
		top:0; 
		left:0;
		z-index:3000;
		/* hide it by default */
		display:none;
		}
		#dialog-box {
		/* css3 drop shadow */
		-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
		-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
		/* css3 border radius */
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		background:#eee;
		/* styling of the dialog box, i have a fixed dimension for this demo */
		width:328px;
		/* make sure it has the highest z-index */
		position:absolute;
		z-index:5000;
		/* hide it by default */
		display:none;
		}
		#dialog-box .dialog-content {
		/* style the content */
		text-align:left;
		padding:10px;
		margin:13px;
		color:#666;
		font-family:arial;
		font-size:11px;
		}
		a.button {
		/* styles for button */
		margin:10px auto 0 auto;
		text-align:center;
		background-color: #e33100;
		display: block;
		width:50px;
		padding: 5px 10px 6px;
		color: #fff;
		text-decoration: none;
		font-weight: bold;
		line-height: 1;
		/* css3 implementation :) */
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
		text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
		border-bottom: 1px solid rgba(0,0,0,0.25);
		position: relative;
		cursor: pointer;
		}
		a.button:hover {
		background-color: #c33100;
		}
		/* extra styling */
		#dialog-box .dialog-content p {
		font-weight:700; margin:0;
		}
		#dialog-box .dialog-content ul {
		margin:10px 0 10px 20px;
		padding:0;
		height:50px;
		}
		

<script type="text/javascript" src="../jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function () {

				// if user clicked on button, the overlay layer or the dialogbox, close the dialog 
				$('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {    
					$('#dialog-overlay, #dialog-box').hide();      
					return false;
				});

				// if user resize the window, call the same function again
				// to make sure the overlay fills the screen and dialogbox aligned to center   
				$(window).resize(function () {

					//only do it if the dialog box is not hidden
					if (!$('#dialog-box').is(':hidden')) popup();      
				});


			});

			//Popup dialog
			function popup(message) {

				// get the screen height and width 
				var maskHeight = $(document).height(); 
				var maskWidth = $(window).width();

				// calculate the values for center alignment
				var dialogHeight =  $('#dialog-box').outerHeight(); 
				var dialogWidth = $('#dialog-box').outerWidth();

				// assign values to the overlay and dialog box
				$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
				$('#dialog-box').css({
						top: "50%",
						left:"50%",
						"margin-left": -(dialogWidth/2),
						"margin-top": -(dialogHeight/2)
						}).show();

				// display the message
				$('#dialog-message').html(message);

			}
		</script>