Overlay custom

If'n you dont wanna implement fancybox based on http://jsfiddle.net/fengelz/qXX2u/

by lovromar

HTML

<a class="overlay-trigger" data-overlay="specifics" href="#specifics">Specifiqs</a>
<section class="overlay specifics">
   
    <div class="inner">
        <a class="close">x</a>
        <h1>Specifics</h1>
        <p>
            Dapibus cum elementum ridiculus lorem turpis magnis nascetur tortor facilisis. Arcu parturient, pid, sed placerat lundium. Pulvinar, augue, tristique purus rhoncus vel tristique. Magnis? Egestas auctor mus odio arcu phasellus, integer porta arcu pellentesque non platea eros risus adipiscing platea, mattis magna ac eu lacus? Dolor tristique platea cum nisi rhoncus pid, nec augue a nec! Placerat, augue in amet velit ut nascetur. Amet! Diam in? Diam mauris cum ac, in non, duis porta scelerisque lacus massa ac et pulvinar, cum, urna ultricies porta! Est porttitor, velit auctor enim in? Etiam urna porttitor ut lacus. Duis? Nec lacus, vel cras. Penatibus magna? Arcu tempor tincidunt, porttitor auctor porttitor pulvinar aenean, tempor in. Dignissim mid, in turpis. Integer hac turpis lundium.
        </p>
    </div>        
</section>

CSS

body {
    background:url(http://lorempixel.com/960/1200/abstract/) top left no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
a, a:hover {
    color:white;
    text-decoration:none;
    cursor:pointer;
}
.overlay {
    background:rgb(255,255,255);
    background:rgba(255,255,255,0.5);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
}
.overlay .inner { 
    position:relative;
    margin:40px auto;
    border-radius:5px;
    padding:20px;
    box-shadow:0px 2px 15px rgba(0,0,0,0.6);
}

.specifics .inner {
    width:400px;  
    background:#333;
    color:white;
    
}
.overlay .inner .close {
    font:14px/14px bold 'Verdana';
    display:block;
    width:14px;
    height:14px;
    padding:5px;
    text-align:center;
    background:#eee;
    color:#222;
    border-radius:20px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.6);
    position:absolute;
    top:-10px;
    right:-10px;
}

JavaScript

$('a.overlay-trigger').click(function(e) {
    e.preventDefault();
    $('.overlay.' + $(this).data('overlay')).fadeIn(300);
});

$(document).keyup(function(e) {
    if (e.keyCode === 27) { // esc clicked
        $('.overlay').click();
    }
});

$('.overlay, .close').click(function(e) {
    e.preventDefault();
    $('.overlay').fadeOut(300);
});

$('.overlay div').click(function(e) {
    e.stopPropagation();
});