Javascript弹出对话框组件

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

<script type="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>

<script>
new WW("buy_btn1","window1","closed1");
new WW("buy_btn2","window2","closed2");
</script>
<!-- 很抱歉 不足90元 -->
<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!