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. function getSize(el) { 
  29.     if (getStyle(el, "display") != "none") { 
  30.         return { width: el.offsetWidth || getStyleNum(el, "width"), height: el.offsetHeight || getStyleNum(el, "height") }; 
  31.     } 
  32.     var _addCss = { display: "", position: "absolute", visibility: 'hidden' }; 
  33.     var _oldCss = {}; 
  34.     for (i in _addCss) { 
  35.         _oldCss[i] = getStyle(el, i); 
  36.     } 
  37. setStyle(el, _addCss); 
  38.     var _width = el.clientWidth || getStyleNum(el, "width"); 
  39.     var _height = el.clientHeight || getStyleNum(el, "height"); 
  40.     for (i in _oldCss) { 
  41.         setStyle(el, _oldCss); 
  42.     } 
  43.     return { width: _width, height: _height }; 
  44.  
  45. function Sid(id){ 
  46.     return "string" ==typeof id ? document.getElementById(id) : id; 
  47. function WW(sID,hID,cID){ 
  48.     var ss = Sid(sID), 
  49.         hh = Sid(hID), 
  50.         cc = Sid(cID); 
  51.         (function(id){ 
  52.             ss.onclick = function(){ 
  53.                 showDialog(id); 
  54.                 hh.style.display = "block";          
  55.             } 
  56.         })(hh); 
  57.         cc.onclick = function(){ 
  58.             hh.style.display = "none"
  59.         } 
  60. var dialogId = ''
  61. function showDialog(hh){ 
  62.     dialogId = hh; 
  63.     var cw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, 
  64.         ch = window.innerHeight|| document.documentElement.clientHeight || document.body.clientHeight; 
  65.         var objC = Sid(hh); 
  66.      var objW = getSize(objC).width, 
  67.          objH = getSize(objC).height, 
  68.         scrollL = document.documentElement.scrollLeft || document.body.scrollLeft 
  69.         scrollT = document.documentElement.scrollTop || document.body.scrollTop; 
  70.         var left = (cw-objW)/2 + scrollL, 
  71.             top = (ch-objH)/2 + scrollT; 
  72.             objC.style.left = left+"px"
  73.             objC.style.top = top + "px";         
  74. window.onresize = function(){ 
  75.     showDialog(dialogId); 
  76. </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!

你可能感兴趣的:(JavaScript,职场,休闲)