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 相关文章推荐
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
js 操作符汇总
Nov 08 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
jquery插件格式实例分析
Jun 16 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
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
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
js实现网页收藏功能
2015/12/17 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
初步讲解Python中的元组概念
2015/05/21 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
python如何随机生成高强度密码
2020/08/19 Python
如何提高MySql的安全性
2014/06/19 面试题
顶撞老师检讨书
2014/02/07 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
运动会广播稿200字
2014/10/18 职场文书
普通党员个人整改措施
2014/10/27 职场文书
庆六一开幕词
2015/01/29 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
Python OpenCV超详细讲解基本功能
2022/04/02 Python
ipad隐藏软件app图标方法
2022/04/19 数码科技