modal working

by Nick Hulea

HTML

<a id='howdy' href='#'>Howdy</a>

CSS

* {
	    margin:0;
	    padding:0;
	}
	#overlay {
	    position:fixed;
	    top:0;
	    left:0;
	    width:100%;
	    height:100%;
	    background:#000;
	    opacity:0.5;
	    filter:alpha(opacity=50);
	}
	#modal {
	    position:absolute;
	    background:url(tint20.png) 0 0 repeat;
	    background:rgba(0, 0, 0, 0.2);
	    border-radius:14px;
	    padding:8px;
	}
	#content {
	    border-radius:8px;
	    background:#fff;
	    padding:20px;
	}
	#close {
	    position:absolute;
	    background:url(http://www.jacklmoore.com/demo/modal/close.png) 0 0 no-repeat;
	    width:24px;
	    height:27px;
	    display:block;
	    text-indent:-9999px;
	    top:-7px;
	    right:-7px;
	}

JavaScript

var modal = (function () {
    var
    method = {},
    $overlay,
    $modal,
    $content,
    $close;

    // Center the modal in the viewport
    method.center = function () {
        var top, left;

        top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
        left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

        $modal.css({
            top: top + $(window).scrollTop(),
            left: left + $(window).scrollLeft()
        });
    };

    // Open the modal
    method.open = function (settings) {
        $content.empty().append(settings.content);

        $modal.css({
            width: settings.width || 'auto',
            height: settings.height || 'auto'
        });

        method.center();
        $(window).bind('resize.modal', method.center);
        $modal.show();
        $overlay.show();
    };

    // Close the modal
    method.close = function () {
        $modal.hide();
        $overlay.hide();
        $content.empty();
        $(window).unbind('resize.modal');
    };

    // Generate the HTML and add it to the document
    $overlay = $('<div id="overlay"></div>');
    $modal = $('<div id="modal"></div>');
    $content = $('<div id="content"></div>');
    $close = $('<a id="close" href="#">close</a>');

    $modal.hide();
    $overlay.hide();
    $modal.append($content, $close);

    $(document).ready(function () {
        $('body').append($overlay, $modal);
    });

    $close.click(function (e) {
        e.preventDefault();
        method.close();
    });

    return method;
}());

// Wait until the DOM has loaded before querying the document
$(document).ready(function () {

    $.get('ajax.html', function (data) {
        modal.open({
            content: data
        });
    });

    $('a#howdy').click(function (e) {
        modal.open({
            content: "Hows it going?"
        });
        e.preventDefault();
    });
});