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