基于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.ajax)
Nov 19 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
Javascript中的async awai的用法
May 17 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
实用的Vue开发技巧
May 30 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 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字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
php按单词截取字符串的方法
2015/04/07 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
bat和python批量重命名文件的实现代码
2016/05/19 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
2019年Java面试必问之经典试题
2012/09/12 面试题
一个SQL面试题
2014/08/21 面试题
给老婆的婚前保证书
2014/02/01 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
英语分层教学实施方案
2014/06/15 职场文书
经营理念标语
2014/06/21 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
户籍证明模板
2014/09/28 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
费用申请报告范文
2015/05/15 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang
python基础之类属性和实例属性
2021/10/24 Python
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle