No JS Shadowbox

Come on people, stop measuring contents with JS for those frikin shadow/lightboxes wrap ur stuff a little and use this css

by meo

HTML

<p>Lorem ipsum dolor sit amet, <a href="#test" data-target="lightbox">consectetur adipiscing elit.</a> Mauris feugiat laoreet sem, vel sollicitudin nibh blandit vel. Suspendisse elit sem, facilisis et laoreet in, fringilla ut ante. In nec ante ac elit rhoncus porttitor. Nullam massa lectus, lobortis sit amet ornare vitae, viverra quis orci. Nulla a eros velit. Integer at molestie leo. Nullam a nisl ut nunc consequat lobortis. Aenean vitae quam quis lectus eleifend porttitor vel ac ante.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat laoreet sem, vel sollicitudin nibh blandit vel. Suspendisse elit sem, facilisis et laoreet in, fringilla ut ante. In nec ante ac elit rhoncus porttitor. Nullam massa lectus, lobortis sit amet ornare vitae, viverra quis orci. Nulla a eros velit. Integer at molestie leo. Nullam a nisl ut nunc consequat lobortis. Aenean vitae quam quis lectus eleifend porttitor vel ac ante.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat laoreet sem, vel sollicitudin nibh blandit vel. Suspendisse elit sem, facilisis et laoreet in, fringilla ut ante. In nec ante ac elit rhoncus porttitor. Nullam massa lectus, lobortis sit amet ornare vitae, viverra quis orci. Nulla a eros velit. Integer at molestie leo. Nullam a nisl ut nunc consequat lobortis. Aenean vitae quam quis lectus eleifend porttitor vel ac ante.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat laoreet sem, vel sollicitudin nibh blandit vel. Suspendisse elit sem, facilisis et laoreet in, fringilla ut ante. In nec ante ac elit rhoncus porttitor. Nullam massa lectus, lobortis sit amet ornare vitae, viverra quis orci. Nulla a eros velit. Integer at molestie leo. Nullam a nisl ut nunc consequat lobortis. Aenean vitae quam quis lectus eleifend porttitor vel ac ante.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat laoreet sem, vel sollicitudin...

SCSS

html.is-lightbox-visible,
html.is-lightbox-visible body {
    min-height: 100%;
    overflow: hidden;
}

html.is-lightbox-visible .lightboxlight-shadow {
    visibility: visible;
    opacity: 1;
}

.lightboxlight-shadow, .lightboxlight-wrap {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
}

.lightboxlight-shadow {
    background: rgba(0,0,0,.5);
}

.lightboxlight-wrap {
    overflow: auto;
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
}

.lightboxlight-inner {
    display: table;
    vertical-align: middle;
    text-align: center;
    min-height: 100%;
    width: 100%;
}

.lightboxlight-contents {
    display: table-cell;
    vertical-align: middle;
    padding: 50px;
}

.lightboxlight-body {
    display: inline-block;
    background: #fff;
    max-width: 70%;
    padding: 20px;
    text-align: left;
    outline: 10px solid rgba(255,255,255,.5);
    cursor: default;
}

JavaScript

var Lightboxlight = function(){
    this.$lightbox = null;
    this.$context = null;
    
    this.isVisible = false;
    this.domModel = "<div class='{namespace}-wrap'><div class='{namespace}-inner'><div class='{namespace}-contents'><div class='{namespace}-body'>{content}</div></div></div></div>";
    
    this.options = {
        toggleclass: "is-lightbox-visible",
        triggerSelector: "[data-target=lightbox]",
        eventNamespace: "lightboxlight"
    };
};
Lightboxlight.prototype.init = function( options,$context ){
    this.options = jQuery.extend({}, this.options, options );
    this.$context = $context && $context.length ? $context : $("html");
    this._createDomModel();
    this._setInteraction();
};
Lightboxlight.prototype.destroy = function( $context ){
    if( this.isVisible || (this.$lightbox && this.$lightbox.length) ) {
        this.$lightbox.remove();
    }
    this.$context.off("click." + this.options.eventNamespace);
};
Lightboxlight.prototype._createDomModel = function(){
    this.domModel = this.domModel.replace(/{namespace}/g, this.options.eventNamespace);
};
Lightboxlight.prototype._addShowClass = function(){
    if( !this.isVisible ){
        this.isVisible = true;
        this.$context.addClass( this.options.toggleclass );
    }
};
Lightboxlight.prototype._removeShowClass = function(){
    if( this.isVisible ){
        this.isVisible = false;
        this.$context.removeClass( this.options.toggleclass );
    }
};
Lightboxlight.prototype._loadContent = function( href ){
    var contentsm, lightboxhtml;
    if( href.indexOf("#") === 0 ){
        contents = $(href).html();
        lightboxhtml = this.domModel.replace("{content}", contents);
        console.log(lightboxhtml)
        this.$lightbox = $(lightboxhtml);
        this.$context.append( this.$lightbox );
    }else{
        //funky ajax call
    }
};
Lightboxlight.prototype.show = function( href ){
    this._addShowClass();
    this._loadContent( href...