Simple Lightbox

Uses jQuery, CSS and HTML. Centers lightbox based on width of viewport.

HTML

<a href="#"; id="test">Please fill out my form.</a>
<div id="lightbox"></div>
<div id="lb-content">
     <span id="lb-close">x</span>
    <p>Wow!! Look at that. So simple.</p>        
</div>

CSS

body {color: #fff; font-family: arial; font-family: arial;}
#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.8;
    text-align: center;
    display: none;
}  
#lb-content {
    color: #222;
    height: 150px;
    width: 260px;
    border: 16px solid #222;
    background-color: #fff;
    position: relative;
    text-align: center;
    padding-top: 10px;
    border-radius: 4px;
    display: none;
}
#lb-close {
    display: block;
    height: 22px;
    width: 25px;
    background-color: red;
    color: #fff;
    position: absolute;
    top: -25px;
    right: -25px; 
    cursor: pointer;
    text-align: center;   
    border-radius: 10px;    
}

JavaScript

var lightBox = $('#lightbox'),
    lightBoxContent = $('#lb-content');

var positionLightbox = function() {
    var veiwWidth = $(window).width(),
        lbContentMargin = (veiwWidth / 2) - 148,
        lbContent = $('#lb-content');

    lbContent.css({
        'left' : lbContentMargin,
        'top' : $(window).scrollTop() + 50 + 'px'
    });
};

$('#test').click(function(e) {
    e.preventDefault();
    lightBox.fadeIn(function() {
        lightBoxContent.show();                               
    });
    positionLightbox();
});

$('#lb-close').click(function() {
    lightBox.hide();
    lightBoxContent.hide();
});
/*hide click outside*/
$(document).mouseup(function (e)
{
    if (!lightBoxContent.is(e.target) // if the target of the click isn't the container...
        && lightBoxContent.has(e.target).length === 0) // ... nor a descendant of the container
    {
        lightBox.hide();
        lightBoxContent.hide();
    }
});