基于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 设置标题的自动翻转
Oct 03 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 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
Linux下编译redis和phpredis的方法
2016/04/07 PHP
实现PHP搜索加分页
2016/10/12 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
js replace 与replaceall实例用法详解
2013/08/03 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
py2exe 编译ico图标的代码
2013/03/08 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
Shell编程面试题
2016/05/29 面试题
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
承诺书格式范文
2014/06/03 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
百家讲坛观后感
2015/06/12 职场文书
环保守法证明
2015/06/24 职场文书
生产车间管理制度
2015/08/04 职场文书
学风建设主题班会
2015/08/17 职场文书
python中print格式化输出的问题
2021/04/16 Python
python获取淘宝服务器时间的代码示例
2021/04/22 Python
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
python游戏开发之pygame实现接球小游戏
2022/04/22 Python
Android中的Launch Mode详情
2022/06/05 Java/Android