纯JavaScript实现完美渐变弹出层

　　前言：对于Web项目开发尤其是前台UI的设计而言，用户体验至关重要，因为它直接关系到项目的成败，简洁，平滑，优雅的设计永远能够受到用户的青睐。

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

脚本Flyout.js:

  1 // JScript File
  2 if (navigator.userAgent.toLowerCase().indexOf('msie') > -1) {
  3     window.isIE = true;
  4     window.isIE6 = navigator.appVersion.indexOf("MSIE 6.0;") > -1;
  5     window.isIE7 = navigator.appVersion.indexOf("MSIE 7.0;") > -1;
  6     window.isIE8 = navigator.appVersion.indexOf("MSIE 8.0;") > -1;
  7 }
  8 var $ = function(objID) { return document.getElementById(objID) };
  9 var _flyout;
 10 var _fadeTimer;
 11 function showflyout(divWidth, divHeight, paddingWidth) {
 12     var flyout = function() {
 13     }
 14     flyout.prototype = {
 15         clientWidth: document.documentElement.clientWidth,
 16         clientHeight: document.documentElement.clientHeight,
 17         scrollWidth: document.documentElement.scrollWidth,
 18         scrollHeight: document.documentElement.scrollHeight,
 19         iframeID: "envelopIframe",
 20         divID: "popupcontent",
 21         iframebgColor: "#888888",
 22         show: function(divContent) {
 23             //Create envelop iframe
 24             cssText = "position:absolute; z-index:100; background-color:#888888; border-0px; filter:alpha(opacity=0); opacity:0.0;";
 25             cssText += "left:0px;";
 26             cssText += "top:0px;";
 27             cssText += "" + this.scrollWidth + "px;";
 28             cssText += "height:" + this.scrollHeight + "px;";
 29             this.create("iframe", this.iframeID, cssText, "Cppl_IFrameSrc.htm", "");
 30             _fadeTimer = setInterval(function() { fadeIframe("envelopIframe", 0.05, 0, 0.5, true) }, 5);
 31             //Create flyout
 32             var cssText = "";
 33             cssText += "display:block; _position:absolute; position:fixed; z-index:101; border:solid 1px Gray; background-color:white;";
 34             cssText += "left:" + (this.clientWidth - divWidth - paddingWidth) / 2 + "px;";
 35             cssText += "top:" + (this.clientHeight - divHeight - paddingWidth) / 2 + "px;";
 36             cssText += "" + (divWidth + paddingWidth) + "px;";
 37             cssText += "height: " + (divHeight + paddingWidth) + "px;";
 38             this.create("div", this.divID, cssText, "", divContent);
 39         },
 40         create: function(type, id, csstext, iframesrc, innerhtml) {
 41             var obj = document.createElement(type);
 42             if (iframesrc.length > 0) {
 43                 obj.src = iframesrc;
 44             }
 45             obj.setAttribute("id", id);
 46             obj.style.cssText = csstext;
 47             if (innerhtml.length > 0) {
 48                 obj.innerHTML = innerhtml;
 49             }
 50             document.body.appendChild(obj);
 51             if (iframesrc.length > 0) {
 52                 if (window.isIE) {
 53                     window.envelopIframe.document.bgColor = this.iframebgColor;
 54                 }
 55             }
 56         },
 57         close: function() {
 58             var objIframe = document.getElementById(this.iframeID);
 59             var objDiv = document.getElementById(this.divID);
 60             if (objIframe && objDiv) {
 61                 document.body.removeChild(objIframe);
 62                 document.body.removeChild(objDiv);
 63             }
 64         },
 65         onresize: function() {
 66             var objIframe = document.getElementById(this.iframeID);
 67             var objDiv = document.getElementById(this.divID);
 68             if (objIframe && objDiv) {
 69                 objIframe.style.width = document.documentElement.scrollWidth + "px";
 70                 objIframe.style.height = document.documentElement.scrollHeight + "px";
 71                 objDiv.style.left = (document.documentElement.clientWidth - divWidth) / 2 + "px";
 72                 objDiv.style.top = (document.documentElement.clientHeight - divHeight) / 2 + "px";
 73             }
 74         },
 75         onscroll: function() {
 76             var objDiv = document.getElementById(this.divID);
 77             if (objDiv) {
 78                 objDiv.style.left = (document.documentElement.clientWidth - divWidth) / 2 + document.documentElement.scrollLeft + "px";
 79                 objDiv.style.top = (document.documentElement.clientHeight - divHeight) / 2 + document.documentElement.scrollTop + "px";
 80             }
 81         }
 82     };
 83     _flyout = new flyout();
 84     _flyout.show("This is a flyout.<div onclick=\"javascript:closeflyout()\">Close Flyout</div>");
 85 }
 86 function closeflyout() {
 87     clearInterval(_fadeTimer);
 88     _fadeTimer = setInterval(function() { fadeIframe("envelopIframe", 0.05, 0, 0.5, false) }, 5);
 89 }
 90 window.onresize = function() {
 91     if (_flyout) {
 92         _flyout.onresize();
 93     }
 94 };
 95 window.onscroll = function() {
 96     if (_flyout && isIE6) {
 97         _flyout.onscroll();
 98     }
 99 };
100 function fadeIframe(objId, speed, minOpacity, maxOpacity, flag) {
101     var dialog = $(objId);
102     if (dialog) {
103         var value;
104         if (flag) {
105             if (parseFloat(dialog.style.opacity) <= maxOpacity) {
106                 value = parseFloat(dialog.style.opacity) + speed;
107                 dialog.style.filter = 'alpha(opacity=' + value * 100 + ')';
108                 dialog.style.opacity = '' + value + '';
109             }
110             else {
111                 clearInterval(_fadeTimer);
112             }
113         }
114         else {
115             if (parseFloat(dialog.style.opacity) >= minOpacity) {
116                 value = parseFloat(dialog.style.opacity) - speed;
117                 dialog.style.filter = 'alpha(opacity=' + value * 100 + ')';
118                 dialog.style.opacity = '' + value + '';
119             }
120             else {
121                 clearInterval(_fadeTimer);
122                 if (_flyout) {
123                     _flyout.close();
124                 }
125             }
126         }
127     }
128 }

调用ASPX代码:

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head id="Head1" runat="server">
 6     <title>Flyout Sample</title>
 7 
 8     <script type="text/javascript" src="Flyout.js"></script>
 9 
10 </head>
11 <body>
12     <form id="form1" runat="server">
13     <div>
14         <div onclick="javascript:showflyout(700, 300, 10);">
15             Click me to test
16         </div>
17         <br />
18         <br />
19         <br />
20         <br />
21         <br />
22         <br />
23         <br />
24         <br />
25         <br />
26         <br />
27         <br />
28         <br />
29         <br />
30         <br />
31         <br />
32         <br />
33         <br />
34         <br />
35         <br />
36         <br />
37         <br />
38         <br />
39         <br />
40         <br />
41         <br />
42         <br />
43         <br />
44         <br />
45         <br />
46         <br />
47         <br />
48         <br />
49         <br />
50         <br />
51         <br />
52         <br />
53         <br />
54         <br />
55         <br />
56         <br />
57         <br />
58         <br />
59         <br />
60         <br />
61         <br />
62         <br />
63         <br />
64         <br />
65         <br />
66         <br />
67         <br />
68         <br />
69         <br />
70         <br />
71         <br />
72         <br />
73         <br />
74         <br />
75     </div>
76     </form>
77 </body>
78 </html>

最终效果图：