Javascript 简单模拟弹出对话框

用法:EasyMask.init({ width: 300, height: 205, title: '帮助订阅', detail: '层里显示内容', opacity: 3, molor: '#000', bgcolor: '#7D0000' });

关闭窗口:EasyMask.close();

演示: 击点查看演示

 

参数说明：

1. width，height：很明显，不说
2. title：标题
3. detail：显示内容
4. opacity：透明层透明度：1~10
5. molor：透明层颜色
6. bgcolor：窗体主色

 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;width:" + 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;width:' + 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;width:" + 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;width:' + 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}

 

下载此JS