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

插件功能特点:

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

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

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

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

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

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

简单使用描述：

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

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

*writer:FanJianHan(henryfan@msn.com)

*License:GPL(GPL-LICENSE.txt)licenses.

*/

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

varMessageOninit=false;

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

varMessageBox_scrolltop,MessageBox_scrollleft,Messagebox_AC,MessageBox_PC;

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

varMessageBox_win,MessageBox_width,MessageBox_height;

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

varMessageBox_Moving=false;


//显示模式提示框

functionShowMessageBox(option)

{

varcontainer,iframe,enabled,enabledframe;

varheight=400;

varwidth=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='<divid=”messagebox_enabled”style=”background-color:lightgrey;width:100%;height:100%;position:absolute;z-index:99998;”></div>'

enabledframe='<iframeid=”messagebox_enabledframe”frameborder=0scrolling=nostyle=”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”);



//创建对话框容器

functionCreateContainer(option)

{

varhtml;

html='<divid=”messagebox_win”style=”position:absolute;z-index:99999;”><tablecellpadding=”0″cellspacing=”0″id=”messagebox_table”><tr><tdid=”messagebox_title_td”><tableid=”messagebox_title_table”><tr><tdstyle=”width:99%;”><divid=”messagebox_title”style=”width:100%;cursor:default;”></div></td><td><buttonid=”messagebox_close”></button></td></tr></table></td></tr><trid=”messagebox_body_td”><tdvalign=”top”><divid=”messagebox_from”style=”text-align:center;”></div></td></tr></table></div>';

if(option.parent)

{

$('#'+option.parent).append(html);

}

else

{

$(document.body).append(html);

}

}


//设置显示时背景式样

functionSetEnabledStyle()

{

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

}


//设置透明式样

functionGetOpacity(css)

{

if(window.navigator.userAgent.indexOf('MSIE')>=1)

{

css.filter=‘progid:DXImageTransform.Microsoft.Alpha(opacity=30)';

}

else

{

css.opacity=‘0.3′;

}

}


//设置对话框试样

functionSetStyle(option)

{

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



}


vardown_x,down_y,cx,cy;

functionhandleMouseDown(e)

{

varevt=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(){returnfalse};

document.documentElement.ondrag=function(){returnfalse};

document.onmousemove=handleMouseMove;

$(document.body).append('<divid=”messagebox_move”style=”position:absolute;z-index:100000;border-right:midnightblue1pxdashed;border-top:midnightblue1pxdashed;border-left:midnightblue1pxdashed;border-bottom:midnightblue1pxdashed;”></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'));



}


functionGetDocumentRegion()

{

varw,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};

}


functionhandleMouseMove(e)

{

varleft,top,region;

if(MessageBox_Moving)

{

varevt=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;

varcss={left:left+'px',top:top+'px'}

$('#messagebox_move').css(css);

}

}


functionhandleMouseUp()

{

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

}



}


//关闭模式对话框

functionCloseMessageBox()

{

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

varnamevalue;

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

varoption={control:”,width:'400′,height:'400′,title:”,parent:null};

varproperties=$(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