用法:EasyMask.init({ 300, height: 205, title: '帮助订阅', detail: '层里显示内容', opacity: 3, molor: '#000', bgcolor: '#7D0000' });
关闭窗口:EasyMask.close();
演示: 击点查看演示
参数说明:
- width,height:很明显,不说
- title:标题
- detail:显示内容
- opacity:透明层透明度:1~10
- molor:透明层颜色
- bgcolor:窗体主色
Code
1var EasyMask = {
2 init: function() {
3 document.body.style.overflow = eval((document.documentElement.offsetWidth) ? "document.documentElement" : "document.body").style.overflow = "hidden";
4 var $ = function(v) { return document.getElementById(v); };
5 var k = function(i, v) { return $(i) ? $(i) : v ? document.createElement("div") : document.createElement("iframe"); };
6 var a = arguments.length ? arguments[0] : new Object;
7 var h = window.innerHeight || self.innerHeight || (document.documentElement && document.documentElement.clientHeight && document.documentElement.offsetHeight) || document.body.clientHeight;
8 var w = window.innerWidth || self.innerWidth || (document.documentElement && document.documentElement.clientWidth && document.documentElement.offsetWidth) || document.body.clientWidth;
9 var t = document.documentElement.scrollTop;
10 var l = document.documentElement.scrollLeft;
11 var o = a.opacity ? a.opacity : 5;
12 var m = a.molor ? a.molor : 'black';
13 var e = a.width ? a.width < 300 ? 300 : a.width : 300;
14 var f = a.height ? a.height < 200 ? 200 : a.height : 200;
15 var b = a.bgcolor ? a.bgcolor : "#7D0000";
16 var c = k("resourceMasks", true);
17 var z = k("resourceContents", true);
18 var s = k("resourceHideSelect", false);
19 var g = k("resourceShadows", true);
20 var top = (h - f) / 2 + t;
21 var left = (w - e) / 2;
22 c.id = "resourceMasks";
23 c.onclick = EasyMask.close;
24 c.style.cssText = "position:absolute;left:0;top:" + t + "px;" + w + "px;height:" + h + "px;background:" + m + ";z-index:999998;filter:alpha(opacity=" + o + "0);opacity:0." + o + ";";
25 z.id = "resourceContents";
26 z.style.cssText = 'background:#fff;border:1px solid ' + b + ';z-index:999999;position:absolute;' + e + 'px;height:' + f + 'px;top:' + top + 'px;left:' + left + 'px;';
27 var i = '<div style="height:25px;background:' + b + ';color:#fff;font:bold 12px/25px Arial;text-indent:6px;overflow:hidden;padding-right:8px;position:relative;">' + (a.title ? a.title : "") + '<span style="position:absolute;right:0;top:0px;cursor:pointer;padding:0 6px 0 3px;" onmouseover="this.style.color=\'red\';" onmouseout="this.style.color=\'#fff\';" title="关闭" onclick="EasyMask.close()">X</span></div>';
28 i += '<div style="padding:6px;position:relative;">' + (a.detail ? a.detail : "") + '</div>';
29 z.innerHTML = i;
30 s.id = "resourceHideSelect";
31 s.style.cssText = "height:" + h + "px;" + w + "px;z-index:999997;position:absolute;top:0;left:0;background:#fff;border:0;filter:alpha(opacity=0);opacity:0;";
32 g.id = "resourceShadows";
33 g.style.cssText = 'background:#000;z-index:999996;position:absolute;' + e + 'px;height:' + f + 'px;top:' + (top + 6) + 'px;left:' + (left + 6) + 'px;filter:alpha(opacity=30);opacity:0.3;';
34 EasyMask.app(s)(c)(z)(g);
35 },
36 close: function() {
37 document.body.style.overflow = eval((document.documentElement.offsetWidth) ? "document.documentElement" : "document.body").style.overflow = "auto";
38 EasyMask.del('resourceMasks', 'resourceContents', 'resourceHideSelect', 'resourceShadows');
39 },
40 app: function(v) {
41 document.body.appendChild(v);
42 return EasyMask.app;
43 },
44 del: function() {
45 for (var i = 0; i < arguments.length; i++) {
46 var id = document.getElementById(arguments[i]);
47 id && id.parentNode.removeChild(id);
48 }
49 }
50}
1var EasyMask = {
2 init: function() {
3 document.body.style.overflow = eval((document.documentElement.offsetWidth) ? "document.documentElement" : "document.body").style.overflow = "hidden";
4 var $ = function(v) { return document.getElementById(v); };
5 var k = function(i, v) { return $(i) ? $(i) : v ? document.createElement("div") : document.createElement("iframe"); };
6 var a = arguments.length ? arguments[0] : new Object;
7 var h = window.innerHeight || self.innerHeight || (document.documentElement && document.documentElement.clientHeight && document.documentElement.offsetHeight) || document.body.clientHeight;
8 var w = window.innerWidth || self.innerWidth || (document.documentElement && document.documentElement.clientWidth && document.documentElement.offsetWidth) || document.body.clientWidth;
9 var t = document.documentElement.scrollTop;
10 var l = document.documentElement.scrollLeft;
11 var o = a.opacity ? a.opacity : 5;
12 var m = a.molor ? a.molor : 'black';
13 var e = a.width ? a.width < 300 ? 300 : a.width : 300;
14 var f = a.height ? a.height < 200 ? 200 : a.height : 200;
15 var b = a.bgcolor ? a.bgcolor : "#7D0000";
16 var c = k("resourceMasks", true);
17 var z = k("resourceContents", true);
18 var s = k("resourceHideSelect", false);
19 var g = k("resourceShadows", true);
20 var top = (h - f) / 2 + t;
21 var left = (w - e) / 2;
22 c.id = "resourceMasks";
23 c.onclick = EasyMask.close;
24 c.style.cssText = "position:absolute;left:0;top:" + t + "px;" + w + "px;height:" + h + "px;background:" + m + ";z-index:999998;filter:alpha(opacity=" + o + "0);opacity:0." + o + ";";
25 z.id = "resourceContents";
26 z.style.cssText = 'background:#fff;border:1px solid ' + b + ';z-index:999999;position:absolute;' + e + 'px;height:' + f + 'px;top:' + top + 'px;left:' + left + 'px;';
27 var i = '<div style="height:25px;background:' + b + ';color:#fff;font:bold 12px/25px Arial;text-indent:6px;overflow:hidden;padding-right:8px;position:relative;">' + (a.title ? a.title : "") + '<span style="position:absolute;right:0;top:0px;cursor:pointer;padding:0 6px 0 3px;" onmouseover="this.style.color=\'red\';" onmouseout="this.style.color=\'#fff\';" title="关闭" onclick="EasyMask.close()">X</span></div>';
28 i += '<div style="padding:6px;position:relative;">' + (a.detail ? a.detail : "") + '</div>';
29 z.innerHTML = i;
30 s.id = "resourceHideSelect";
31 s.style.cssText = "height:" + h + "px;" + w + "px;z-index:999997;position:absolute;top:0;left:0;background:#fff;border:0;filter:alpha(opacity=0);opacity:0;";
32 g.id = "resourceShadows";
33 g.style.cssText = 'background:#000;z-index:999996;position:absolute;' + e + 'px;height:' + f + 'px;top:' + (top + 6) + 'px;left:' + (left + 6) + 'px;filter:alpha(opacity=30);opacity:0.3;';
34 EasyMask.app(s)(c)(z)(g);
35 },
36 close: function() {
37 document.body.style.overflow = eval((document.documentElement.offsetWidth) ? "document.documentElement" : "document.body").style.overflow = "auto";
38 EasyMask.del('resourceMasks', 'resourceContents', 'resourceHideSelect', 'resourceShadows');
39 },
40 app: function(v) {
41 document.body.appendChild(v);
42 return EasyMask.app;
43 },
44 del: function() {
45 for (var i = 0; i < arguments.length; i++) {
46 var id = document.getElementById(arguments[i]);
47 id && id.parentNode.removeChild(id);
48 }
49 }
50}