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