Javascript弹出对话框组件

              Javascript弹出对话框组件

    自从做前端以来 也快有一年了，也接触过很多javascript框架，比如Jquery YUI KISSY等等，但是有时候太依赖于框架并不好，要更多的学习原审javascript才会更能理解！因为IT很多大型公司都有自己内部封装的框架，所以对于我们前端人员来说 框架并不可靠 可靠的要深刻理解javascript！今天我分享的是弹出对话框组件，以前做页面时 做项目时 都是调用腾讯写好的弹出框组件,但是一直用它的也并不好！所以我用Jquery框架写了个弹出框来,然后借助于那个思想！简单的用javascript封装了下！为什么我会想的写组件呢 那是因为考虑到网站性能及高效的代码！因为如果你没有用组件的话 假如页面上有100个甚至更多弹出框 那你是不是要写更多的重复js代码，嘿嘿 好了 废话小说...  现在来谈谈我写的这个弹出框的一个思路吧！能兼容IE6 7 8 火狐 谷歌 搜狗 等等游览器！  

1.点击HTML元素时 弹出一个对话框 同时使页面的颜色变成半透明！                2.弹出对话框要居中对齐 并且当页面缩放时 也要居中对齐！

下面是HTML/css代码

1. <script type="text/javascript"> 
2. function getType(o){ 
3.         var _t; 
4.         return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase(); 
5.     } 
6.     //获取元素样式 
7. function getStyle(el, styleName) { 
8.         return el.style[styleName] ? el.style[styleName] : el.currentStyle ? el.currentStyle[styleName] : window.getComputedStyle(el, null)[styleName]; 
9.     } 
10. function getStyleNum(el, styleName) { 
11.         return parseInt(getStyle(el, styleName).replace(/px|pt|em/ig,'')); 
12.     } 
13. function setStyle(el, obj){ 
14.     if (getType(obj) == "object") { 
15.         for (s in obj) { 
16.             var cssArrt = s.split("-"); 
17.             for (var i = 1; i < cssArrt.length; i++) { 
18.                 cssArrt[i] = cssArrt[i].replace(cssArrt[i].charAt(0), cssArrt[i].charAt(0).toUpperCase()); 
19.             } 
20.             var cssArrtnew = cssArrt.join(""); 
21.             el.style[cssArrtnew] = obj[s]; 
22.         } 
23.     } 
24.     else  
25.         if (getType(obj) == "string") { 
26.             el.style.cssText = obj; 
27.         } 
28. } 
29. function getSize(el) { 
30.     if (getStyle(el, "display") != "none") { 
31.         return { width: el.offsetWidth || getStyleNum(el, "width"), height: el.offsetHeight || getStyleNum(el, "height") }; 
32.     } 
33.     var _addCss = { display: "", position: "absolute", visibility: 'hidden' }; 
34.     var _oldCss = {}; 
35.     for (i in _addCss) { 
36.         _oldCss[i] = getStyle(el, i); 
37.     } 
38. setStyle(el, _addCss); 
39.     var _width = el.clientWidth || getStyleNum(el, "width"); 
40.     var _height = el.clientHeight || getStyleNum(el, "height"); 
41.     for (i in _oldCss) { 
42.         setStyle(el, _oldCss); 
43.     } 
44.     return { width: _width, height: _height }; 
45. } 
46.  
47. function Sid(id){ 
48.     return "string" ==typeof id ? document.getElementById(id) : id; 
49. } 
50. function WW(sID,hID,cID){ 
51.     var ss = Sid(sID), 
52.         hh = Sid(hID), 
53.         cc = Sid(cID); 
54.         (function(id){ 
55.             ss.onclick = function(){ 
56.                 showDialog(id); 
57.                 hh.style.display = "block";          
58.             } 
59.         })(hh); 
60.         cc.onclick = function(){ 
61.             hh.style.display = "none"; 
62.         } 
63. } 
64. var dialogId = ''; 
65. function showDialog(hh){ 
66.     dialogId = hh; 
67.     var cw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, 
68.         ch = window.innerHeight|| document.documentElement.clientHeight || document.body.clientHeight; 
69.         var objC = Sid(hh); 
70.      var objW = getSize(objC).width, 
71.          objH = getSize(objC).height, 
72.         scrollL = document.documentElement.scrollLeft || document.body.scrollLeft 
73.         scrollT = document.documentElement.scrollTop || document.body.scrollTop; 
74.         var left = (cw-objW)/2 + scrollL, 
75.             top = (ch-objH)/2 + scrollT; 
76.             objC.style.left = left+"px"; 
77.             objC.style.top = top + "px";         
78. } 
79. window.onresize = function(){ 
80.     showDialog(dialogId); 
81. } 
82. </script> 

1. <script> 
2.     new WW("buy_btn1","window1","closed1");  
3.     new WW("buy_btn2","window2","closed2");  
4. </script> 
5. <!-- 很抱歉 不足90元 --> 
6. <div id="window1"><div id="closed1"></div></div> 
7. <!-- 很抱歉 每个买家只能参加五个活动 --> 
8. <div id="window2"><div id="closed2"></div></div> 
9. <!-- 很抱歉 当日道具码被另完了 --> 
10. <div id="window3"><div id="closed3"></div></div> 
11. <!-- 很抱歉 活动已经结束了 --> 
12. <div id="window4"><div id="closed4"></div></div> 

点击aaaaa元素时就会弹出一个对话框 并且居中对齐 ，但是要注意几个问题：一开始时候我用display:none；把对话框隐藏了起来,大家都知道display:none 这样设置后，然后再js里面获取隐藏的对话框的宽度和高度时候根本就获取不到！因为diaplay：none后在页面上不占据任何的物理空间！所以当你用上面的js获取宽度和高度时候 会显示0；之后我想用HTML这个属性：visiblity:hidden;当调用js时获取宽度和高度之前用js让他显示出来！就可以获取隐藏后对话框的宽度和高度 因为他隐藏了但还是占据物理空间,然后就可以顺利的计算对话框居中的位置!!但是用visiblity:hidden可以完成居中这个方法 并且兼容IE6 IE8 火狐 谷歌等游览器 但是在IE7下有个小小的bug 就是我一打开页面 本来用visiblity:hidden 弹出框是隐藏的 但是在IE7下 他却能显现出来 但是当你一刷新后就没有啊 之后你再点击 关闭都是正常的！但是在打开页面渲染的时候 有个小小bug  所以用了上面一段js来获取隐藏后的对话框的宽度和高度就可以了！！调用方法：在页面上可以看得到!还要注意一个情况是：

document.documentElement.scrollLeft 这个方法和 document.documentElement.scrollTop在IE和火狐都显示正常， 但是在谷歌和360则显示不正常 所以要加上 document.body.scrollTop和document.body.scrollLeft!