基于Jquery的开发个代阴影的对话框效果代码


Posted in Javascript onJuly 28, 2011
<script type="text/javascript" src="http://img.zzl.com/script/jquery/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("#open").click(function() { 
openDialog(a1); //调用,直接写上DIV的ID即可 
}); 
}); 
var openDialog = function(o) { 
var dialog = new zzlDialog(o); 
dialog.open(); 
} 
var zzlDialog = function(o) { 
this.init = function() { 
/* 对话框初始化 */ 
var XBox = '\ 
<div id="mask"/>\ 
<div id="wai">\ 
</div>\ 
<div id="nie">\ 
<table>\ 
<thead>\ 
<tr>\ 
<td>\ 
阴影弹出框\ 
</td>\ 
<td>\ 
</td>\ 
</tr>\ 
</thead>\ 
<tbody>\ 
<tr>\ 
<td colspan="2">' + $(o).html() + '\ 
</td>\ 
</tr>\ 
</tbody>\ 
</table>\ 
</div>\ 
'; 
$(document.body).append(XBox); 
}; this.cssInit = function() { 
/* css初始化 */ 
$("#wai").css({ "padding": "10px", "background": "#000", "filter": "Alpha(Opacity='50')", "position": "absolute" }); 
$("#nie").css({ "position": "absolute", "z-index": "1000" }); 
$("#nie>table").css({ "border": "1px solid rgb(55,119,188)", "border-collapse": "collapse", "background": "#fff" }); 
$("#nie>table>thead>tr").css({ "background": "rgb(0,94,172)", "color": "#fff", "height": "30px", "font-size": "14px", "font-weight": "bold" }); 
$("#nie>table").find("td").css({ "padding": "5"}); 
/* 内部主体定位 */ 
$("#nie").css({ "top": "50px" }); 
$("#nie").css({ "left": "50px" }); 
/* 关闭按钮 */ 
var $close = $("#nie>table>thead").find("td").next("td"); 
$close.html("<span>关闭</span>"); 
$close.css({ "text-align": "right", "padding-right": "5px" }); 
$close.find("span").css({ "font-weight": "normal", "cursor": "hand" }); 
$close.find("span").click(function() { new zzlDialog().closes(); }); 
/* 外部阴影添加 ,及位置和大小由内部内容来控制 */ 
$("#wai").css({ "width": ($("#nie>table").width() + 16) + "px", "height": ($("#nie>table").height() + 16) + "px" }); 
$("#wai").css({ "top": $("#nie").position().top - 8 + "px", "left": $("#nie").position().left - 8 + "px", "z-index": $("#nie").css("z-index") }); 
// $("#wai").corner("5px"); //圆角 
}; 
this.open = function() { 
this.init(); 
this.cssInit(); 
this.shadow(); 
}; 
this.shadow = function() { 
this.event_b_show(); 
if (window.attachEvent) { 
window.attachEvent('onresize', this.event_b); 
window.attachEvent('onscroll', this.event_b); 
} 
else { 
window.addEventListener('resize', this.event_b, false); 
window.addEventListener('scroll', this.event_b, false); 
} 
}; 
this.event_b = function() { 
var oShadow = $('#mask'); 
if (oShadow.css("display") != "none") { 
if (this.event_b_show) { 
this.event_b_show(); 
} 
} 
}; 
this.closes = function() { 
var oShadow = $('#mask'); 
oShadow.css({ 'display': 'none' }); 
$("#wai").remove(); 
$("#nie").remove(); 
}; 
this.event_b_show = function() { 
var oShadow = $('#mask'); 
oShadow.css({ 'position': 'absolute', 'display': '', 'opacity': '0.1', 'filter': 'alpha(opacity=10)', 'background': '#000' }); 
var sClientWidth = parent ? parent.document.body.offsetWidth : document.body.offsetWidth; 
var sClientHeight = parent ? parent.document.body.offsetHeight : document.body.offsetHeight; 
var sScrollTop = parent ? (parent.document.body.scrollTop + parent.document.documentElement.scrollTop) : (document.body.scrollTop + document.documentElement.scrollTop); 
oShadow.css({ 'top': '0px', 'left': '0px', 'width': sClientWidth + "px", 'height': (sClientHeight + sScrollTop) + "px" });
Javascript 相关文章推荐
jquery实现加载等待效果示例
Sep 25 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 Javascript
js实现碰撞检测
Jan 29 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 #Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 #Javascript
另一个javascript小测验(代码集合)
Jul 27 #Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 #Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 #Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 #Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 #Javascript
You might like
PHP 强制下载文件代码
2010/10/24 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
Python实现堆排序的方法详解
2016/05/03 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Python绘制七段数码管实例代码
2017/12/20 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
类的核心特性有哪些
2014/01/01 面试题
高中生期末评语
2014/01/28 职场文书
花店创业计划书范文
2014/02/07 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
改革共识倡议书
2014/08/29 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫