SO - leanModal.js

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

by karimkhan

HTML

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

<div id="test">
    <p>rdieis vel erat malesuada sodales.</p>
    <input type="button" value="test" onclick ="test()"/>
</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 test()
{
    alert("er");
}

(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);

                  ...