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实现的完美渐变弹出层效果代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@