Simple Lightbox

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

by aflynt

HTML

<button id="search-submit">open lb</button>
<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'
    });
};

$('#search-submit').click(function() {
    lightBox.fadeIn(function() {
        lightBoxContent.show();                               
    });
    positionLightbox();
});

$('#lb-close').click(function() {
    lightBox.hide();
    lightBoxContent.hide();
});