Modal Popup Demo

by Annie Lagang

HTML

<div id="mask">
    <div id="modal">
        <span id="close">X</span><br />
        We'd love to know more about you! To help us ensure that we are sending you the right information, <br/> 
        please take a moment to verfiy and update your profile.

    Thank you very much!<br/>
        <span id="update">Update</span>
    </div>
</div>

<!--SOURCE: http://www.alessioatzeni.com/blog/login-box-modal-dialog-window-with-css-and-jquery/-->

CSS

#mask {
	display: none;
	background-image:url(http://i.imgur.com/0KbiL.png); 
	position: fixed; left: 0; top: 0; 
	z-index: 10;
	width: 100%; height: 100%;
	opacity: 0.8;
	z-index: 999;
}

#modal
{
    display:none;
	background: #FFF;
	padding: 10px; 	
    border:5px solid #ffc700;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	box-shadow: 0px 0px 20px #999; /* CSS3 */
    -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
    -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
	border-radius:3px 3px 3px 3px;
    -moz-border-radius: 3px; /* Firefox */
    -webkit-border-radius: 3px; /* Safari, Chrome */
}

JavaScript

$(function(){
     //Fade in the Popup
    $('#modal').fadeIn(300);
		
	//Set the center alignment padding + border see css style
	var popMargTop = ($('#modal').height() + 24) / 2; 
	var popMargLeft = ($('#modal').width() + 24) / 2; 
		
	$('#modal').css({ 
	    'margin-top' : -popMargTop,
		'margin-left' : -popMargLeft
	});
		
		// Add the mask to body
		$('body').append('<div id="mask"></div>');
	$('#mask').fadeIn(300);
    
    $('#update').live('click', function(e) { 
        alert('Thanks for your update!');
        
        $('#mask').fadeOut(300 , function() {
		    $('#mask').hide();
        }); 
        
	    if (e.preventDefault) 
        { 
            e.preventDefault(); 
        }
        else 
        { 
            e.returnValue = false; 
        }
	});
    
    $('#close').bind('click', function(e) { 
        $('#mask').fadeOut(300 , function() {
		     $('#mask').hide();
        });
	});
});