jquery对话框插件

http://www.0773linji.com/jquery_plugs/jq_dialog/

演示一 $("#openBox").click(function(){ $.dialog.open({ title: \'Hello World!\', drag:true }); });

打开

演示二 $("#openBox2").click(function(){ $.dialog.alert(\'你确定要上传图片吗？\',function(){alert(\'关闭\');}); });

打开

演示三 $("#openBox3").click(function(){ $.dialog.open({ title: \'Hello World!\', width:200, drag:true }); });

打开

相关代码 (function($) {
$.extend({
dialog:function(options){
//默认配置
var defaults = {
//对话框ID
id: false,
//消息内容
content: "弹出框内容区",
//确定按钮文本
okValue: \'确定\',
//取消按钮文本
cancelValue: \'取消\',
//标题
title: "标题区",
//内容宽度
width: "auto",
//内容高度
height: "auto",
//是否锁屏
lock: true,
//是否拖动
drag:false
};
var config = $.extend(defaults, options);
config.id = config.id ? config.id : new Date().getTime();
//插入DOM
var dom = $(\'<div id="\' + config.id + \'">\' + $.dialog.templates + \'</div>\').hide();
dom.css({\'position\': \'absolute\', \'z-index\': \'9999\'});
$("body").append(dom);
/**
* 初始化设置
*/
this.init = function () {
this.dom = dom;
this.config = config;
dom.find(\'.openDialog_buttons\').hide();
//设置内容
this.content(config.content);
//设置标题
this.title(config.title);
//设置尺寸
this.size(config.width, config.height);
//设置居中
this.position();
//设置锁屏
if (config.lock) {
this.lock();
}
if(config.drag)
{
//拖拽支持
var mouse = {x:0, y:0};
function drag(event) {
var e = window.event || event;
var top = parseInt(dom.css(\'top\')) + (e.clientY - mouse.y);
var left = parseInt(dom.css(\'left\')) + (e.clientX - mouse.x);
dom.css({top:top,left:left});
mouse.x = e.clientX;
mouse.y = e.clientY;
}
dom.find(".openDialog_header").mousedown(function(event){
var e = window.event || event;
mouse.x = e.clientX;
mouse.y = e.clientY;
$(document).bind(\'mousemove\', drag);
});
$(document).mouseup(function(event){
$(document).unbind(\'mousemove\', drag);
});
}
//监听事件
dom.find(".openDialog_close").bind("click", this.close);
config.id = false;
}

/**
* 打开对话框
*/
this.open = function () {
this.init();
dom.fadeIn();
}

/**
* 设置内容
* @param {String} 内容
*/
this.content = function (message) {
if (typeof message === "string") {
dom.find(".openDialog_main").html(message);
}
}

/**
* 设置标题
* @param {String, Boolean} 标题内容. 为 false 则隐藏标题栏
*/
this.title = function (content) {
if (content === false) {
dom.find(".openDialog_header").hide();
dom.find(".openDialog_title").html(\'\')
} else {
dom.find(".openDialog_header").show();
dom.find(".openDialog_title").html(content)
};
}

/**
* 位置居中
*/
this.position = function () {
var left = ($(window).width() - dom.outerWidth()) / 2.0;
var top = ($(window).height() - dom.outerHeight()) /3.0;
dom.css({
top: top + $(document).scrollTop(),
left: left + $(document).scrollLeft()
});
}

/**
* 尺寸
* @param {Number, String} 宽度
* @param {Number, String} 高度
*/
this.size = function (width, height) {
if (typeof width === "number") {
width = width + "px";
};
if (typeof height === "number") {
height = height + "px";
};
dom.find(".openDialog_main").css("width", width);
dom.find(".openDialog_main").css("height", height);
}

/**
* 显示对话框
*/
this.visible = function () {
dom.css("visibility", "visible");
}

/**
* 隐藏对话框
*/
this.hidden = function () {
dom.css("visibility", "hidden");
}

/**
* 关闭对话框
*/
this.close = function () {
dom.fadeOut("slow", function(){
$(this).remove();
});
$(".openDialog_mask").remove();
}

/**
* 锁屏
*/
this.lock=function(){
$("body").append(\'<div id="\' + this.config.id + \'" class="openDialog_mask"></div>\');
$(".openDialog_mask").css({
\'z-index\': \'8888\',
"left":"0px",
"top":"0px",
"width":"100%",
"height":\'100%\',
\'display\': \'block\'
});
};

}
});

/**
* HTML模板
*/
$.dialog.templates =
\'<div class="openDialog">\'
+ \'<table class="openDialog_border" border="0" cellspacing="0" cellpadding="0">\'
+ \'<tbody>\'
+ \'<tr>\'
+ \'<td class="openDialog_header">\'
+ \'<div class="openDialog_title">Title</div>\'
+ \'<a class="openDialog_close" href="javascript:">[关闭]</a>\'
+ \'</td>\'
+ \'</tr>\'
+ \'<tr>\'
+ \'<td class="openDialog_main">\'
+ \'</td>\'
+ \'</tr>\'
+ \'<tr>\'
+ \'<td class="openDialog_footer">\'
+ \'<div class="openDialog_buttons"></div>\'
+ \'</td>\'
+ \'</tr>\'
+ \'</tbody>\'
+ \'</table>\'
+\'</div>\';

/*窗口对象展现方法集合*/
$.dialog.open = function(options){
var dialog = new $.dialog(options);
dialog.init();
dialog.dom.fadeIn();
return dialog;
};

$.dialog.alert = function(content, callback){
var dialog = new $.dialog({
id: \'Alert\',
lock: true,
content: content
});
dialog.init();
$(\'#Alert\').find(\'.openDialog_buttons\').append(\'<input class="openDialog_button" type="button" value="\' + dialog.config.okValue + \'">\');
dialog.dom.find(\'.openDialog_buttons\').show();
dialog.dom.fadeIn();
$(\'.openDialog_button\').bind(\'click\',callback);
$(\'.openDialog_button\').bind(\'click\',dialog.close);
return dialog;
};

})(jQuery);