基于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 相关文章推荐
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
webpack打包js的方法
Mar 12 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 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
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
分析JavaScript数组操作难点
2017/12/18 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
Python Tkinter简单布局实例教程
2014/09/03 Python
Python入门篇之数字
2014/10/20 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
flask开启多线程的具体方法
2020/08/02 Python
如何解决python多种版本冲突问题
2020/10/13 Python
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
市场营销专业应届生自荐信
2014/06/19 职场文书
五四青年节的活动方案
2014/08/20 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
年终工作总结范文2014
2014/11/27 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
竞聘书的秘诀
2019/04/02 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
Python绘制散乱的点构成的图的方法
2022/04/21 Python
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技