基于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 相关文章推荐
动态表格Table类的实现
Aug 26 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
javascript中如何判断类型汇总
May 14 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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 HTML代码串 截取实现代码
2009/06/29 PHP
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
python创建关联数组(字典)的方法
2015/05/04 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
PHP经典面试题
2016/09/03 面试题
高中生自我评价个人范文
2013/11/09 职场文书
银行职业规划书范文
2013/12/28 职场文书
司机辞职报告范文
2014/01/20 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
婚前协议书范本
2014/10/27 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers