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


Posted in Javascript onJune 15, 2008

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

JQuery实现自定义对话框的代码messageboxscript.rar
Javascript 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
用JavaScript隐藏控件的方法
Sep 21 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
js实现录音上传功能
Nov 22 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
webpack 动态批量加载文件的实现方法
Mar 19 Javascript
javascript基本语法分析说明
Jun 15 #Javascript
javascript新手语法小结
Jun 15 #Javascript
JavaScript入门学习书籍推荐
Jun 12 #Javascript
asp.net和asp下ACCESS的参数化查询
Jun 11 #Javascript
json跟xml的对比分析
Jun 10 #Javascript
json 定义
Jun 10 #Javascript
json简单介绍
Jun 10 #Javascript
You might like
Apache2 httpd.conf 中文版
2006/11/17 PHP
PHP中strtotime函数使用方法分享
2012/01/10 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
JavaScript 学习笔记(四)
2009/12/31 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
浅谈angular4生命周期钩子
2017/09/05 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
python装饰器使用方法实例
2013/11/21 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
python实现自动发送邮件
2018/06/20 Python
python3 线性回归验证方法
2019/07/09 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
总务岗位职责
2013/11/19 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
校园安全检查制度
2014/02/03 职场文书
大四自我鉴定
2014/02/08 职场文书
税务干部鉴定材料
2014/02/11 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
工作总结与自我评价
2014/09/18 职场文书
社会工作专业自荐信
2014/09/26 职场文书
优秀员工自荐书
2015/03/06 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
英语通知范文
2015/04/22 职场文书
草房子读书笔记
2015/06/29 职场文书
《打电话》教学反思
2016/02/22 职场文书
Java数组详细介绍及相关工具类
2022/04/14 Java/Android