JQuery实现自定义对话框的代码

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

插件功能特点:

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

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

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

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

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

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

简单使用描述：

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

定义相关按钮为行：

定义相关对话框显示的内容:

<tr>

<td >

JQuery模式对话框插件好用吗?</td>

</tr>

<tr>

</tr>

</table>

</div>

复制代码代码如下:

/* JQuery 模式对话框插件 * writer: FanJianHan ([email protected]) * 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(); }); }); });

messageboxscript.rar

JQuery实现自定义对话框的代码

相关推荐