基于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 相关文章推荐
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
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根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
php生成图片验证码的方法
2016/04/15 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
动态添加js事件实现代码
2009/03/12 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
JS前端加密算法示例
2016/12/22 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
浅谈Node异步编程的机制
2017/10/18 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
Python中列表(list)操作方法汇总
2014/08/18 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
英语简历自我评价
2014/01/26 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
团日活动总结书格式
2014/05/08 职场文书
外国人来华邀请函
2015/01/31 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
班主任开场白
2015/06/01 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
如何撰写创业策划书
2019/06/27 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL