JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/q/8439457/1011582

HTML

<a id="go" name="test" href="#test">Basic Content</a>

<div id="test">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum libero purus, convallis nec vestibulum eget, luctus vitae purus. Vestibulum non mauris et sem vulputate pellentesque ac a turpis. Ut vel lacus vitae justo vestibulum lobortis. Nunc ipsum ipsum, laoreet id dictum nec, fermentum vel purus. Maecenas nisl felis, faucibus non rutrum eu, sollicitudin sed ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent dignissim lacinia tempus. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Nulla accumsan pellentesque velit, a malesuada diam tristique a. Fusce eleifend magna erat, et imperdiet orci. Quisque sapien mauris, malesuada eu tristique pulvinar, placerat id ligula. Vivamus vitae viverra nulla. Donec eget turpis vel erat malesuada sodales.</p>
</div>

CSS

#lean_overlay {
    position: fixed;
    z-index: 10000;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

        #test {
     width: 600px;
padding: 30px; 
    display:none;


    background: #FFF;
        border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
        box-shadow: 0px 0px 4px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
       
}

#test p { color: #666; text-shadow: none; }

JavaScript

(function($) {

    $.fn.extend({

        leanModal: function(options) {

            var defaults = {
                top: 100,
                overlay: 0.5
            }

            options = $.extend(defaults, options);

            return this.each(function() {

                var o = options;

                $(this).click(function(e) {

                    var overlay = $("<div id='lean_overlay'></div>");

                    var modal_id = $(this).attr("href");

                    $("body").append(overlay);

                    $("#lean_overlay").click(function() {
                        close_modal(modal_id);
                    });

                    var modal_height = $(modal_id).outerHeight();
                    var modal_width = $(modal_id).outerWidth();

                    $('#lean_overlay').css({
                        'display': 'block',
                        opacity: 0
                    });

                    $('#lean_overlay').fadeTo(200, o.overlay);

                    $(modal_id).css({

                        'display': 'block',
                        'position': 'fixed',
                        'opacity': 0,
                        'z-index': 11000,
                        'left': 50 + '%',
                        'margin-left': -(modal_width / 2) + "px",
                        'top': o.top + "px"

                    });

                    $("<img />").css({
                        // styling for the img
                        'position': 'fixed',
                        'top': o.top + 'px',
                        'left': '50%'
                    }).click(function() {
                        // onclick behaviour - just close it
                        close_modal(modal_id);
                        // icon URL   vvvvvvvvvvvvvvvvvvvvv
                    }).attr('src', 'http://bit.ly/ttN6Qs').appendTo($(modal_id));

                    $(modal_id).fadeTo(200, 1);

                    e.preventDefault();

               ...