jQuery: centering a Lightbox without a stated height

by lovromar

HTML

<p>Dictumst sed, in, in nec <a href="#box1" class="lightbox">amet</a> odio tristique, integer egestas, egestas enim dignissim, mattis porttitor facilisis, turpis tortor, tempor quis parturient, augue scelerisque duis est arcu nec urna augue integer diam montes in. Vel nunc tristique, dignissim mid aliquet aenean, aliquam etiam adipiscing tortor tristique scelerisque vel et? Nunc pid a est eros amet magna quis ac a! Non, <a href="#box2" class="lightbox">integer</a>, sagittis urna nec, enim! A egestas ultrices sit, sit elit eros et non etiam cursus mauris natoque rhoncus pid nec mus! Auctor nec porta! Pid, ut, a, arcu. Massa in, dapibus cum ut! Integer integer facilisis, ultricies nec tincidunt nec, aliquet turpis augue mid in quis. Rhoncus integer, sagittis in. Nisi ut? Est adipiscing in duis nisi nec! Elit purus.</p>

<div id="box1" class="box">
    <a href="#box1">Close</a>
Auctor nec porta! Pid, ut, a, arcu. Massa in, dapibus cum ut! Integer integer facilisis, ultricies nec tincidunt nec, aliquet turpis augue mid in quis. Rhoncus integer, sagittis in. Nisi ut? Est adipiscing in duis nisi nec! Elit purus.
</div> 

<div id="box2" class="box">
    <a href="#box2">Close</a>
Vel nunc tristique, dignissim mid aliquet aenean, aliquam etiam adipiscing tortor tristique scelerisque vel et? Nisi ut? Est adipiscing in duis nisi nec! Elit purus.
</div>

CSS

html {
    height: 100%;
    min-height: 100%;
}

body {
    font: 90% Arial, sans-serif;
    height: 100%;
    min-height: 100%;
}

p {
    margin: 1em;
    line-height: 1.4;
}

p a {
    font-weight: bold;
    color: #06c;
}


div.box {
    border: 1px solid #333;
    position: absolute;
    width: 20em;
    padding: 1em;
    line-height: 1.3;
    background: #000;
    color: #fff;
    border-radius: 10px;
    display: none;
}

div.box > a:first-child {
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background: #333;
    color: transparent;
    text-decoration: none;
    position: absolute;
    top: -5px;
    right: 5px;
    border-radius: 50%;
}

div.box > a:first-child:before {
    content: 'X';
    color: #fff;
    display: block;
    text-align: center;
}

#overlay {
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
}

JavaScript

var LightBox = {
    wrapBoxes: function() {
        $('div.box').wrapAll('<div id="overlay"></div>');
    },
    positionBoxes: function() {

        $('div.box').each(function() {
            var $box = $(this);
            $box.css({
                top: '50%',
                left: '50%',
                marginTop: '-' + Math.round($box.outerHeight() / 2) + 'px',
                marginLeft: '-' + Math.round($box.outerWidth() / 2) + 'px'
            });

        });

    },
    showBoxes: function() {

        $('a.lightbox').each(function() {

            var $a = $(this);

            $a.click(function() {

                var target = $($a.attr('href'));
                $('#overlay').show(0, function() {

                    target.fadeIn(500);

                });

                return false;
            });

        });


    },

    hideBoxes: function() {

        $('div.box').each(function() {

            var $a = $('a:first', $(this));

            $a.click(function() {

                $a.parent().fadeOut(500, function() {

                    $(this).parent().hide();
                });

                return false;
            });

        });

    },

    init: function() {

        this.wrapBoxes();
        this.positionBoxes();
        this.showBoxes();
        this.hideBoxes();
    }
};

LightBox.init();