javascript为我们提供几种对话框功能，但功能都十分有限；虽然在IE下可以通过模式窗体的方式创建更丰富的对话框功能，但毕竟只有IE得到支持。为了得到更丰富的自定义对话框功能，于是用jquery编写了一个对话框插件；只需简单地引用相关JavaScript就能得到丰富的自定义对话框功能。
插件功能特点:
允许通过css进行外观控制。
可以任意把面页的元素作为对话框显示。
当对话框激活时，对话框外的任何元素不能接受鼠标操作。
对话框可以在工作区范围内任意移动，根据工作区大小自适应居中功能。
并不需要编写复杂的JavaScript,通过简单HTML属性描述即可。
经过测试插件可以在Firefox和IE下正常工作。
简单使用描述：
引用JQuery和对话框插件文件：
<script src=jquery-latest.js></script>
<script src=messageBox.js></script>
JavaScript代码
- /* 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();
- });
- });
- });
定义相关按钮为行：
<input id="Button4" type="button" value="提问对话框" showoption="control:test2;width:220;height:120;title:对话框" />
定义相关对话框显示的内容:
xml/HTML代码
- <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>
