Simple Lightbox

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

HTML

<div id="lightbox"></div>

<div id="lb-content"> 
    <object data="http://www.nclabor.com/wh/faqs.pdf?#view=fitH" type="application/pdf" width="100%" height="100%">
 
        <param name=”view” value=”fitH” />

    </object>       
    <input id="agree" type="button" value="   I have read the above.   " />
</div>

CSS

body {color: #fff; font-family: arial; font-family: arial;}
#lightbox {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.8;
    text-align: center;
    display: none;
}  
#lb-content {
    color: #222;
    top:50%;
    margin-top: -300px;
    height: 600px;
    left: 50%;
    margin-left: -350px;
    width: 700px;
    border: 16px solid #222;
    background-color: #fff;
    position: absolute;
    text-align: center;
    padding-top: 10px;
    border-radius: 4px;
    display: none;
        vertical-align:middle;

}

JavaScript

var lightBox = $('#lightbox'),
    lightBoxContent = $('#lb-content');
 
 function show() {
    lightBox.fadeIn(function() {
        lightBoxContent.show();                               
    });
    positionLightbox();
};

$('#agree').click(function() {
    lightBox.hide();
    lightBoxContent.hide();
});

 show();