插件功能特点:
允许通过css进行外观控制。
可以任意把面页的元素作为对话框显示。
当对话框激活时，对话框外的任何元素不能接受鼠标操作。
对话框可以在工作区范围内任意移动，根据工作区大小自适应居中功能。
并不需要编写复杂的javascript,通过简单html属性描述即可。
经过测试插件可以在firefox和ie下正常工作。
简单使用描述：
引用jquery和对话框插件文件：
定义相关按钮为行：
定义相关对话框显示的内容:
jquery模式对话框插件好用吗?
下载例程和源码
复制代码 代码如下:
/* 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='
'
enabledframe='';
$('#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='
';
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 {
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;3
document.documentelement.onselectstart = function(){return false};
document.documentelement.ondrag = function(){return false};
document.onmousemove = handlemousemove;
$(document.body).append('
');
$('#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)3
{
top = region.height-10 - messagebox_height;
}
if(left left =10;
if(top 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 {
namevalue = properties[i].split(':');
if(namevalue.length >1)
{
execute =option. + namevalue[0] +'=\''+ namevalue[1]+'\';';
eval(execute);
}
}
$(this).click(function(){
showmessagebox(option);
document.body.focus();
});
});
});