Discus Popup Dialog

by Taufik Nurrohman

HTML

<div id="disqus-container">Konten disqus di sini...<br>Konten disqus di sini...<br>Konten disqus di sini...<br>Konten disqus di sini...<br>Konten disqus di sini...<br>Konten disqus di sini...<br>Konten disqus di sini...<br>Konten disqus di sini...<br>Konten disqus di sini...<br>Konten disqus di sini...</div>
<button id="open">Buka Dialog</button>
<button id="close">Tutup Dialog</button>

CSS

#disqus-container {
    width:200px;
    height:150px;
    background-color:black;
    padding:10px;
    color:white;
    overflow:auto;
    display:none;
}

body {padding:30px}

JavaScript

(function($) {
    $.fn.lightBoxPlugin = function(a, b) {
        return this.each(function() {
            $(this).css({
                'position': 'absolute',
                'top': '50%',
                'left': '50%',
                'margin-top': '-' + $(this).outerHeight()/2 + 'px',
                'margin-left': '-' + $(this).outerWidth()/2 + 'px'
            });
            if (a == "open") {
                $(this).fadeIn(b);
            } else if (a == "close") {
                $(this).fadeOut(b);
            } else {
                $(this).hide();
            }
        });
    };
})(jQuery);

$(function() {
    $('#disqus-container').lightBoxPlugin();
    $('#open').click(function() {
        $('#disqus-container').lightBoxPlugin("open", 400);
    });
    $('#close').click(function() {
        $('#disqus-container').lightBoxPlugin("close", 400);
    });
});