开源中文网

您的位置: 首页 > jquery框架 > 正文

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

来源: 网络整理  作者: 佚名

为了得到更丰富的自定义对话框功能,于是用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(); 

}); 

});  

}); 

Tags:对话框 代码
关于开源中文网 - 联系我们 - 广告服务 - 网站地图 - 版权声明