纯JavaScript实现完美渐变弹出层
前言:对于Web项目开发尤其是前台UI的设计而言,用户体验至关重要,因为它直接关系到项目的成败,简洁,平滑,优雅的设计永远能够受到用户的青睐。
如题,本文将使用纯粹的脚本JavaScript实现渐变的弹出层,其想法也非常简单:利用IFrame实现遮盖,再借助一个DIV用于展现弹出层的内容,最后再使用其内置函数setInterval()和clearInterval()实现渐变,原理非常简单,只不过要注意对DOM对象/元素的精确控制。由于代码比较简单,在此就不再赘述。以下代码在IE6+,FF3.5+测试通过。
脚本Flyout.js:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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-width:0px; filter:alpha(opacity=0); opacity:0.0;";
25 cssText += "left:0px;";
26 cssText += "top:0px;";
27 cssText += "width:" + 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 += "width:" + (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 }
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-width:0px; filter:alpha(opacity=0); opacity:0.0;";
25 cssText += "left:0px;";
26 cssText += "top:0px;";
27 cssText += "width:" + 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 += "width:" + (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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
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>
最终效果图:
作者:舍长
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.