Javascript弹出对话框组件

                           Javascript弹出对话框组件

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

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

下面是HTML/css代码

 

"text/javascript">
function getType(o){
        var _t;
        return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();
    }
    //获取元素样式
function getStyle(el, styleName) {
        return el.style[styleName] ? el.style[styleName] : el.currentStyle ? el.currentStyle[styleName] : window.getComputedStyle(el, null)[styleName];
    }
function getStyleNum(el, styleName) {
        return parseInt(getStyle(el, styleName).replace(/px|pt|em/ig,''));
    }
function setStyle(el, obj){
    if (getType(obj) == "object") {
        for (s in obj) {
            var cssArrt = s.split("-");
            for (var i = 1; i < cssArrt.length; i++) {
                cssArrt[i] = cssArrt[i].replace(cssArrt[i].charAt(0), cssArrt[i].charAt(0).toUpperCase());
            }
            var cssArrtnew = cssArrt.join("");
            el.style[cssArrtnew] = obj[s];
        }
    }
    else
        if (getType(obj) == "string") {
            el.style.cssText = obj;
        }
}
function getSize(el) {
    if (getStyle(el, "display") != "none") {
        return { width: el.offsetWidth || getStyleNum(el, "width"), height: el.offsetHeight || getStyleNum(el, "height") };
    }
    var _addCss = { display: "", position: "absolute", visibility: 'hidden' };
    var _oldCss = {};
    for (i in _addCss) {
        _oldCss[i] = getStyle(el, i);
    }
setStyle(el, _addCss);
    var _width = el.clientWidth || getStyleNum(el, "width");
    var _height = el.clientHeight || getStyleNum(el, "height");
    for (i in _oldCss) {
        setStyle(el, _oldCss);
    }
    return { width: _width, height: _height };
}

function Sid(id){
    return "string" ==typeof id ? document.getElementById(id) : id;
}
function WW(sID,hID,cID){
    var ss = Sid(sID),
        hh = Sid(hID),
        cc = Sid(cID);
        (function(id){
            ss.onclick = function(){
                showDialog(id);
                hh.style.display = "block";
            }
        })(hh);
        cc.onclick = function(){
            hh.style.display = "none";
        }
}
var dialogId = '';
function showDialog(hh){
    dialogId = hh;
    var cw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        ch = window.innerHeight|| document.documentElement.clientHeight || document.body.clientHeight;
        var objC = Sid(hh);
     var objW = getSize(objC).width,
         objH = getSize(objC).height,
        scrollL = document.documentElement.scrollLeft || document.body.scrollLeft
        scrollT = document.documentElement.scrollTop || document.body.scrollTop;
        var left = (cw-objW)/2 + scrollL,
            top = (ch-objH)/2 + scrollT;
            objC.style.left = left+"px";
            objC.style.top = top + "px";
}
window.onresize = function(){
    showDialog(dialogId);
}

<script>
    new WW("buy_btn1","window1","closed1");
    new WW("buy_btn2","window2","closed2");
script>

<div id="window1"><div id="closed1">div>div>

<div id="window2"><div id="closed2">div>div>

<div id="window3"><div id="closed3">div>div>

<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!