JavaScript为我们提供几种对话框功能，但功能都十分有限；虽然在IE下可以通过模式窗体的方式创建更丰富的对话框功能，但毕竟只有IE得到支持。为了得到更丰富的自定义对话框功能，于是用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;3
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)3
{
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();
});
});
});