JQuery实现自定义对话框的代码

为了得到更丰富的自定义对话框功能，于是用JQuery编写了一个对话框插件；只需简单地引用相关JavaScript就能得到丰富的自定义对话框功能。

插件功能特点:

允许通过CSS进行外观控制。

可以任意把面页的元素作为对话框显示。

当对话框激活时，对话框外的任何元素不能接受鼠标操作。

对话框可以在工作区范围内任意移动，根据工作区大小自适应居中功能。

并不需要编写复杂的JavaScript,通过简单HTML属性描述即可。

经过测试插件可以在Firefox和IE下正常工作。

简单使用描述：

引用JQuery和对话框插件文件：

<script src=jquery-latest.js></script>
<script src=messageBox.js></script>
定义相关按钮为行：
<input id=”Button4″ type=”button” value=”提问对话框“ showoption=”control:test2;width:220;height:120;title:对话框” />
定义相关对话框显示的内容:
<div id=”test2″ style=”display:none”>
<table style=”width: 200px”>
<tr>
<td >
JQuery模式对话框插件好用吗？</td>
</tr>
<tr>
<td align=”right” >
<input id=”Button2″ onclick=”CloseMessageBox（）” type=”button” value=”是” />
<input id=”Button6″ onclick=”CloseMessageBox（）” type=”button” value=”否” /></td>
</tr>
</table>
</div>
复制代码代码如下:
/* JQuery 模式对话框插件

* writer: FanJianHan （henryfan@msn.com）

* License: GPL （GPL-LICENSE.txt） licenses.

*/

//是否已初始化过对话框

var MessageOninit = false;

//记录body滚动条的x,y偏移量;显示内容的元素对象，显示内容元素对象的父对象

var MessageBox_scrolltop,MessageBox_scrollleft,Messagebox_AC,MessageBox_PC;

//对话框对象，对话框宽度，对话框高度

var MessageBox_win,MessageBox_width,MessageBox_height;

//对话框是否处于移动状态

var MessageBox_Moving = false;

//显示模式提示框

function ShowMessageBox（option）

{

var container,iframe,enabled,enabledframe;

var height=400;

var width =400;

MessageBox_scrolltop =0;

MessageBox_scrollleft =0;

if（！MessageOninit）

{

CreateContainer（option）;

MessageOninit = true;

$（"#messagebox_close"）.click（function（）{

CloseMessageBox（）;

}）;

$（window）.resize（function（）{

SetStyle（option）;

SetEnabledStyle（）;

}）;

$（window）.scroll（function（e）{

MessageBox_scrolltop =document.documentElement.scrollTop;

MessageBox_scrollleft = document.documentElement.scrollLeft;

SetEnabledStyle（）;

}）;

MessageBox_win = $（”#messagebox_win”）;

$（"#messagebox_title"）.mousedown（handleMouseDown）;

$（"#messagebox_title"）.mouseup（handleMouseUp）;

$（"#messagebox_title"）.mousemove（handleMouseMove）;

document.onmouseup = handleMouseUp;

}

if（option.height）

height = parseInt（option.height）;

if（option.width）

width = parseInt（option.width）;

MessageBox_height = height;

MessageBox_width = width;

Messagebox_AC = $（"#"+option.control）;

MessageBox_PC = Messagebox_AC.parent（）;

Messagebox_AC.css（"display",”）;

enabled="<div id=”messagebox_enabled” style=”background-color: lightgrey;width:100%;height:100%;position:absolute;z-index:99998;”></div>"

enabledframe="<iframe id=”messagebox_enabledframe” frameborder=0 scrolling=no style=”position:absolute; visibility:inherit; top:0px; left_0px; width:100%;height:100%;z-index:99997; “></iframe>";

$（"#messagebox_enabledframe"）.remove（）_

$（"#messagebox_enabled"）.remove（）;

$（"#messagebox_title"）.html（option.title）;

$（"#messagebox_from"）.append（Messagebox_AC）;

SetStyle（option）;

$（document.body）.append（enabledframe）;

$（document.body）.append（enabled）;

SetEnabledStyle（）;

$（"#messagebox_win"）.fadeIn（”slow”）;

//创建对话框容器

function CreateContainer（option）

{

var html;

html="<div id=”messagebox_win” style=”position:absolute;z-index:99999;”><table cellpadding=”0″ cellspacing=”0″ id=”messagebox_table”><tr><td id=”messagebox_title_td”><table id=”messagebox_title_table” ><tr><td style=”width:99%;” ><div id=”messagebox_title” style=”width:100%;cursor: default;”></div></td><td><button id=”messagebox_close”></button></td></tr></table></td></tr><tr id=”messagebox_body_td”><td valign=”top” ><div id=”messagebox_from” style=”text-align: center;”></div></td></tr></table></div>";

if（option.parent）

{

$（"#" + option.parent）.append（html）;

}

else

{

$（document.body）.append（html）;

}

}

//设置显示时背景式样

function SetEnabledStyle（）

{

var de,w,h,css,region;

region = GetDocumentRegion（）;

css ={width:region.width+”px”,height:region.height+”px”,

left: MessageBox_scrollleft+"px",top: MessageBox_scrolltop +"px"}

GetOpacity（css）;

$（”#messagebox_enabled”）.css（css）;

$（”#messagebox_enabledframe”）.css（css）;

}

//设置透明式样

function GetOpacity（css）

{

if（window.navigator.userAgent.indexOf（"MSIE"）>=1）

{

css.filter= ‘progid:DXImageTransform.Microsoft.Alpha（opacity=30）";

}

else

{

css.opacity= ‘0.3′;

}

}

//设置对话框试样

function SetStyle（option）

{

var region,css;

region = GetDocumentRegion（）;

css ={width:MessageBox_width+"px",height:MessageBox_height+"px",

left: （（region.width - MessageBox_width）/2）+"px",top: （（region.height - MessageBox_height）/2）+"px"}

if（region.height < MessageBox_height ）//如果body显示的高度小于对话框高度

{

css.top=10+"px";

}

else

{

css.top=（（region.height - MessageBox_height）/2）+"px"

}

$（"#messagebox_win"）.css（css）;

css.top="0px";

css.left="0px";

$（"#messagebox_table"）.css（css）;

css.width="100%";

css.height="16px";

$（"#messagebox_title_td"）.css（css）;

css.height= height-46 +"px";

$（"#messagebox_body_td"）.css（css）;

}

var down_x,down_y,cx,cy;

function handleMouseDown（e）

{

var evt = e || event;

down_x=evt.clientX;

down_y = evt.clientY;

cx =（parseInt（MessageBox_win.css（"left"））|0）;

cy = （parseInt（MessageBox_win.css（"top"））|0）

MessageBox_Moving= true;³

document.documentElement.onselectstart = function（）{return false};

document.documentElement.ondrag = function（）{return false};

document.onmousemove = handleMouseMove;

$（document.body）.append（"<div id=”messagebox_move” style=”position: absolute; z-index:100000;border-right: midnightblue 1px dashed; border-top: midnightblue 1px dashed; border-left: midnightblue 1px dashed; border-bottom: midnightblue 1px dashed;”></div>"）;

$（"#messagebox_move"）.css（"width",MessageBox_win.css（"width"））;

$（"#messagebox_move"）.css（"height",MessageBox_win_u99 ？ss（"height"））;

$（"#messagebox_move"）.css（"left",MessageBox_win.css（"left"））;

$（"#messagebox_move"）.css（"top",MessageBox_win.css（"top"））;

}

function GetDocumentRegion（）

{

var w,h,de;

de = document.documentElement;

w = self.innerWidth || （de&&de.clientWidth） || document.body.clientWidth;

h = self.innerHeight || （de&&de.clientHeight）|| document.body.clientHeight;

return {height:h,width:w};

}

function handleMouseMove（e）

{

var left,top,region;

if （MessageBox_Moving）

{

var evt = e || event;

left =evt.clientX+cx-down_x;

top = evt.clientY+cy-down_y;

region = GetDocumentRegion（）;

if（left+ MessageBox_width > region.width）

{

left = region.width - 10- MessageBox_width;

}

if（top + MessageBox_height >region.height）³

{

top = region.height-10 - MessageBox_height;

}

if（left <10）

left =10;

if（top <10）

top =10;

var css ={left:left+"px",top:top+"px"}

$（"#messagebox_move"）.css（css）;

}

}

function handleMouseUp（）

{

if（MessageBox_Moving）

{

MessageBox_win.css（"width",$（"#messagebox_move"）.css（”width”））;

MessageBox_win.css（"height",$（"#messagebox_move"）.css（”height”））;

MessageBox_win.css（"left",$（"#messagebox_move"）.css（”left”））;

MessageBox_win.css（"top",$（"#messagebox_move"）.css（”top”））;

}

MessageBox_Moving _u61 ？ false;

document.onmousemove = null;

$（"#messagebox_move"）.remove（）;

}

}

//关闭模式对话框

function CloseMessageBox（）

{

if（MessageOninit）

{

$（"#messagebox_win"）.hide（）;

$（"#messagebox_enabled"）.remove（）;

$（"#messagebox_enabledframe"）.remove（）;

Messagebox_AC.css（"display","none"）;

MessageBox_PC.append（Messagebox_AC）;

}

document.documentElement.onselectstart = null;

document.documentElement.ondrag = null;

}

$（document）.ready（function（）{

$（document）.find（"[@showoption]‘）.each（function（）{

var namevalue;

//虽然显示的元素id,显示宽度,显示高度,标题,对话框寄居的元素对象id

var option={control:”,width:"400′,height:"400′,title:”,parent:null};

var properties = $（this）.attr（"showoption"）.split（";"）;

for（i=0;i<properties.length;i++）

{

namevalue = properties[i].split（":"）;

if（namevalue.length >1）

{

execute =”option.” + namevalue[0] +"=”+ namevalue[1]+"";";

eval（execute）;

}

}

$（this）.click（function（）{

ShowMessageBox（option）;

document.body.focus（）;

}）;

}）;

}）;

messageboxscript.rar