纯JavaScript实现的完美渐变弹出层效果代码


Posted in Javascript onApril 02, 2010

如题,本文将使用纯粹的脚本JavaScript实现渐变的弹出层,其想法也非常简单:利用IFrame实现遮盖,再借助一个DIV用于展现弹出层的内容,最后再使用其内置函数setInterval()和clearInterval()实现渐变,原理非常简单,只不过要注意对DOM对象/元素的精确控制。由于代码比较简单,在此就不再赘述。以下代码在IE6+,FF3.5+测试通过。
脚本Flyout.js:

// JScript File 
if (navigator.userAgent.toLowerCase().indexOf('msie') > -1) { 
window.isIE = true; 
window.isIE6 = navigator.appVersion.indexOf("MSIE 6.0;") > -1; 
window.isIE7 = navigator.appVersion.indexOf("MSIE 7.0;") > -1; 
window.isIE8 = navigator.appVersion.indexOf("MSIE 8.0;") > -1; 
} 
var $ = function(objID) { return document.getElementById(objID) }; 
var _flyout; 
var _fadeTimer; 
function showflyout(divWidth, divHeight, paddingWidth) { 
var flyout = function() { 
} 
flyout.prototype = { 
clientWidth: document.documentElement.clientWidth, 
clientHeight: document.documentElement.clientHeight, 
scrollWidth: document.documentElement.scrollWidth, 
scrollHeight: document.documentElement.scrollHeight, 
iframeID: "envelopIframe", 
divID: "popupcontent", 
iframebgColor: "#888888", 
show: function(divContent) { 
//Create envelop iframe 
cssText = "position:absolute; z-index:100; background-color:#888888; border-width:0px; filter:alpha(opacity=0); opacity:0.0;"; 
cssText += "left:0px;"; 
cssText += "top:0px;"; 
cssText += "width:" + this.scrollWidth + "px;"; 
cssText += "height:" + this.scrollHeight + "px;"; 
this.create("iframe", this.iframeID, cssText, "Cppl_IFrameSrc.htm", ""); 
_fadeTimer = setInterval(function() { fadeIframe("envelopIframe", 0.05, 0, 0.5, true) }, 5); 
//Create flyout 
var cssText = ""; 
cssText += "display:block; _position:absolute; position:fixed; z-index:101; border:solid 1px Gray; background-color:white;"; 
cssText += "left:" + (this.clientWidth - divWidth - paddingWidth) / 2 + "px;"; 
cssText += "top:" + (this.clientHeight - divHeight - paddingWidth) / 2 + "px;"; 
cssText += "width:" + (divWidth + paddingWidth) + "px;"; 
cssText += "height: " + (divHeight + paddingWidth) + "px;"; 
this.create("div", this.divID, cssText, "", divContent); 
}, 
create: function(type, id, csstext, iframesrc, innerhtml) { 
var obj = document.createElement(type); 
if (iframesrc.length > 0) { 
obj.src = iframesrc; 
} 
obj.setAttribute("id", id); 
obj.style.cssText = csstext; 
if (innerhtml.length > 0) { 
obj.innerHTML = innerhtml; 
} 
document.body.appendChild(obj); 
if (iframesrc.length > 0) { 
if (window.isIE) { 
window.envelopIframe.document.bgColor = this.iframebgColor; 
} 
} 
}, 
close: function() { 
var objIframe = document.getElementById(this.iframeID); 
var objDiv = document.getElementById(this.divID); 
if (objIframe && objDiv) { 
document.body.removeChild(objIframe); 
document.body.removeChild(objDiv); 
} 
}, 
onresize: function() { 
var objIframe = document.getElementById(this.iframeID); 
var objDiv = document.getElementById(this.divID); 
if (objIframe && objDiv) { 
objIframe.style.width = document.documentElement.scrollWidth + "px"; 
objIframe.style.height = document.documentElement.scrollHeight + "px"; 
objDiv.style.left = (document.documentElement.clientWidth - divWidth) / 2 + "px"; 
objDiv.style.top = (document.documentElement.clientHeight - divHeight) / 2 + "px"; 
} 
}, 
onscroll: function() { 
var objDiv = document.getElementById(this.divID); 
if (objDiv) { 
objDiv.style.left = (document.documentElement.clientWidth - divWidth) / 2 + document.documentElement.scrollLeft + "px"; 
objDiv.style.top = (document.documentElement.clientHeight - divHeight) / 2 + document.documentElement.scrollTop + "px"; 
} 
} 
}; 
_flyout = new flyout(); 
_flyout.show("This is a flyout.<div onclick=\"javascript:closeflyout()\">Close Flyout</div>"); 
} 
function closeflyout() { 
clearInterval(_fadeTimer); 
_fadeTimer = setInterval(function() { fadeIframe("envelopIframe", 0.05, 0, 0.5, false) }, 5); 
} 
window.onresize = function() { 
if (_flyout) { 
_flyout.onresize(); 
} 
}; 
window.onscroll = function() { 
if (_flyout && isIE6) { 
_flyout.onscroll(); 
} 
}; 
function fadeIframe(objId, speed, minOpacity, maxOpacity, flag) { 
var dialog = $(objId); 
if (dialog) { 
var value; 
if (flag) { 
if (parseFloat(dialog.style.opacity) <= maxOpacity) { 
value = parseFloat(dialog.style.opacity) + speed; 
dialog.style.filter = 'alpha(opacity=' + value * 100 + ')'; 
dialog.style.opacity = '' + value + ''; 
} 
else { 
clearInterval(_fadeTimer); 
} 
} 
else { 
if (parseFloat(dialog.style.opacity) >= minOpacity) { 
value = parseFloat(dialog.style.opacity) - speed; 
dialog.style.filter = 'alpha(opacity=' + value * 100 + ')'; 
dialog.style.opacity = '' + value + ''; 
} 
else { 
clearInterval(_fadeTimer); 
if (_flyout) { 
_flyout.close(); 
} 
} 
} 
} 
}

调用ASPX代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
<title>Flyout Sample</title> 
<script type="text/javascript" src="Flyout.js"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<div onclick="javascript:showflyout(700, 300, 10);"> 
Click me to test 
</div> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
</div> 
</form> 
</body> 
</html>

最终效果图:
纯JavaScript实现的完美渐变弹出层效果代码
Javascript 相关文章推荐
各浏览器对click方法的支持差异小结
Jul 31 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
几行js代码实现自适应
Feb 24 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 #Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 #Javascript
Javascript 类与静态类的实现(续)
Apr 02 #Javascript
用js实现计算加载页面所用的时间
Apr 02 #Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 #Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 #Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 #Javascript
You might like
深入理解php的MySQL连接类
2013/06/07 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
如何实现JS函数的重载
2006/09/22 Javascript
关于js类的定义
2011/06/28 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
玩转python爬虫之URLError异常处理
2016/02/17 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Python简单生成随机数的方法示例
2018/03/31 Python
Keras loss函数剖析
2020/07/06 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
个人近期表现材料
2014/02/11 职场文书
python基础详解之if循环语句
2021/04/24 Python
mysql 带多个条件的查询方式
2021/06/05 MySQL