jquery.nmk.dialog.js

(function( $ ) {

var slice = [].slice;

$.fn.dialog = function() {
	var args = slice.call( arguments );
	return this.each(function() {
		dialog.apply( null, [ $( this ) ].concat( args ) );
	});
};

function dialog( element, options ) {
	// initialize via DOM mutation
	if ( typeof options !== "string" ) {
		return dialog.mutate( element, $.extend( {}, dialog.options, options ) );
	}

	// invoke a method
	var args = slice.call( arguments, 2 );
	dialog[ options ].apply( null, [ element.closest( ".nmk-dialog" ) ].concat( args ) )
}

$.extend( dialog, {
	options: {
		title: "Dialog",
		width: 300
	},

	mutate: function( element, options ) {
		var dialog = $( "<div>" )
			.addClass( "nmk-dialog" )
			.css( "width", options.width );

		var title = $( "<div>" )
			.addClass( "nmk-dialog-title" )
			.text( options.title )
			.appendTo( dialog );

		$( "<button>" )
			.addClass( "nmk-dialog-title-close" )
			.text( "close" )
			.appendTo( title );

		element
			.addClass( "nmk-dialog-content" )
			.appendTo( dialog );

		dialog.appendTo( "body" );
	},

	open: function( element ) {
		element
			.position({ of: window })
			.show();
	},

	close: function( element ) {
		element.hide();
	}
});

// close the dialog
$( ".nmk-dialog-title-close" ).live( "click", function() {
	// it doesn't matter what element we call the dialog close method on
	// as long as it's inside the dialog widget
	$( this ).dialog( "close" );
});

}( jQuery ) );