Custom Modal - Javascript

var modal = (function () {

var

method = {},

$overlay,

$modal,

$content,

$url,

$close,

$save;

$overlay = $('

');

$modal = $('

');

$content = $('

');

$close = $('close');

$save = $('save');

$modal.hide();

$overlay.hide();

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

$modal.append($content, $save);

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

};

method.saveComplete;

method.hideClose = function () { $close.hide(); }

method.showClose = function () { $close.show(); }

method.hideSave = function () { $save.hide(); }

method.showSave = function () { $save.show(); }

method.update = 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);

}

method.openURL = function(url, allowSave, saveCallBack)

{

allowSave = (typeof allowSave === "undefined") ? false : allowSave;

saveCallBack = (typeof saveCallBack === "undefined") ? null : saveCallBack;

//alert(saveCallBack);

if (saveCallBack != null)

{

//alert('saveCallBack');

this.saveComplete = saveCallBack;

}

this.open({ content: '' });

this.hideSave();

modal.url = url;

this.hideClose();

//alert(url);

$.ajax(

{

type: "GET",

cache: false,

url: url,

contentType: "text/html",

success: function (data) {

modal.update({ content: data });

method.showClose();

if (allowSave) {

method.showSave();

}

},

error: function (data) {

modal.update({ content: data });

method.showClose();

}

});

}

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

};

method.close = function () {

$modal.hide();

$overlay.hide();

$content.empty();

$(window).unbind('resize.modal');

};

$close.click(function (e) {

e.preventDefault();

method.close();

});

$save.click(function (e) {

e.preventDefault();

var data = $content.find('form').serialize();

method.update({ content: '

' });

method.hideSave();

method.hideClose();

$.ajax({

type: "POST",

url: modal.url,

data: data, // serializes the form's elements.

success: function (data) {

method.close();

if (method.saveComplete != null) {

method.saveComplete(data);

}

}

});

//alert(modal.url);

});

$(document).ready(function () {

$('body').append($overlay, $modal);

});

return method;

}());

function openModal(o, callBack) {

var url = '';

try {

url = $(o).attr('href').valueOf();

} catch (e) {

url = o;

}

var showSave = (typeof callBack === "undefined") ? false : true;

modal.openURL(url, showSave, callBack);

return false;

}