Lightbox

by wrxsti85

HTML

<div id="overlay">
    <div id="lb"></div>
</div>
<button>Click</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit pellentesque sodales. Sed ex magna, tincidunt et laoreet et, molestie vitae neque. Donec vestibulum enim eget mauris molestie, ut maximus quam semper. Fusce egestas dolor lorem, eu consectetur nisl bibendum id. Nulla fringilla ante eget diam sodales, id dictum velit aliquam. Fusce condimentum tempus gravida. Fusce neque metus, gravida nec commodo id, tincidunt et ex. Nulla in mauris augue. Mauris sodales eros sit amet rhoncus tempus. Suspendisse maximus risus in lacus lacinia molestie. Pellentesque sit amet hendrerit lacus, quis fringilla arcu. Nulla pretium libero vel sem scelerisque auctor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit pellentesque sodales. Sed ex magna, tincidunt et laoreet et, molestie vitae neque. Donec vestibulum enim eget mauris molestie, ut maximus quam semper. Fusce egestas dolor lorem, eu consectetur nisl bibendum id. Nulla fringilla ante eget diam sodales, id dictum velit aliquam. Fusce condimentum tempus gravida. Fusce neque metus, gravida nec commodo id, tincidunt et ex. Nulla in mauris augue. Mauris sodales eros sit amet rhoncus tempus. Suspendisse maximus risus in lacus lacinia molestie. Pellentesque sit amet hendrerit lacus, quis fringilla arcu. Nulla pretium libero vel sem scelerisque auctor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit pellentesque sodales. Sed ex magna, tincidunt et laoreet et, molestie vitae neque. Donec vestibulum enim eget mauris molestie, ut maximus quam semper. Fusce egestas dolor lorem, eu consectetur nisl bibendum id. Nulla fringilla ante eget diam sodales, id dictum velit aliquam. Fusce condimentum tempus gravida. Fusce neque metus, gravida nec commodo id, tincidunt et ex. Nulla in mauris augue. Mauris sodales eros sit amet rhoncus tempus. Suspendisse maximus risus in lacus lacinia molestie....

CSS

#overlay {
    display:none;
    background: rgba(0,0,0,.8);
    position: fixed;
    top: 0px;
    left: 0px;
}
#lb {
    width: 400px;
    height: 200px;
    background: #fff;
    position: absolute;
}

JavaScript

var jayBox = function(){
	var sWidth = $(document).width(),
        sHeight = $(document).height(),
   		lbWidth = $('#lb').width(),
        lbHeight = $('#lb').height();
    $('#overlay').width(sWidth).height(sHeight);
    $('#lb').css({
    	'left': (sWidth - lbWidth) / 2,
        'top': (sHeight - lbHeight) / 2
    });
    $('#lb, #overlay').fadeIn(200);
};

$('button').click(function(){
	jayBox();
});

$(window).on('resize', function(){
	jayBox();
});

$('#overlay').click(function(){
	$('#overlay, #lb').fadeOut(200);
});