弹出对话框

很久没更新博客了，一则最近项目紧没太多时间，二则将近年底人心浮躁；

这个弹出框几周前就写了，只是一直没完善，当然现在也是比较简陋的版本，在要求不高的场合中凑合着应用。

主要问题是要兼容ie6下fixed的效果，其他浏览求直接position：fixed即可实现在网页中固定位置跟随浏览器滚动并且不会闪烁。

先看实现的效果：

以下是js代码：

 

function d_log(contents){
    if(!(this instanceof d_log))
        return new d_log(contents);
    this.title=contents&&contents.title||"系统提示";//默认系统提示
    this.con=contents&&contents.con||"";//默认弹出内容为空
    this.wrap=contents&&contents.wrap;
    this.confirm=contents&&contents.confirm;
    this.init();
}
d_log.prototype.init=function(){
    var self=this,c_height;
    c_height=document.compatMode!="BackCompat" ? document.documentElement.clientHeight : document.body.clientHeight;
    if(getEl('#pageOverlay')){//公用一个cover层，这样避免冗余标签
        self.cover=getEl('#pageOverlay');
    }else{
        self.cover=document.createElement('div');
        self.cover.id='pageOverlay';
        document.body.appendChild(self.cover);
    }    
    if(!self.dialog){
        self.dialog=document.createElement('div');
        self.dialog.className='pageDialog';    
    }
    if(self.wrap){//如果有指定显示的层则把它加到弹出层中
        self.dialog.appendChild(getEl(self.wrap));
        document.body.appendChild(self.dialog);
    }else{//没有则重新构建一个弹出层
        self.dialog.innerHTML='<h3><a class="d_dialog_close" href="javascript:;">x</a>'+self.title+'</h3>';
        self.dialog.innerHTML+=self.con+"<p id='oprate'><a href='javascript:;' class='confirm'>确定</a><a href='javascript:;' class='concel'>取消</a></p>";
        document.body.appendChild(self.dialog);
        if(self.confirm)getEl('#oprate').lastChild.style.display='inline-block';
        var cl=getEl('.d_dialog_close');
        getEl('#oprate').firstChild.onclick=function(){
            self.close();
            if(self.confirm)eval(self.confirm+'()');
        }
        getEl('#oprate').lastChild.onclick=function(){
            self.close();
        }
        for(var i=0;i<cl.length;i++)
            cl[0].onclick=function(){self.close();}
    }
    self.dialog.style.left=(document.body.clientWidth-parseInt(getSize(self.dialog).width))/2+'px';
    self.dialog.style.top=(c_height-parseInt(getSize(self.dialog).height))/2+'px';
    if(!window.XMLHttpRequest){//处理ie6下position:fixed的问题
        document.execCommand('BackgroundImageCache', false, true);
        var cover = self.cover;
        self.dialog.style.position = 'absolute';
        cover.style.position = 'absolute';
        cover.innerHTML='<iframe width="100%" height="100%" frameborder="0" scrolling="no" style="z-index: -1; position: absolute; left: 0pt; top: 0pt;filter:alpha(opacity=0);"></iframe>';
        window.onscroll = function(){
            if(cover.style.display == 'block'){
                cover.style.left=document.documentElement.scrollLeft + document.documentElement.clientWidth - cover.offsetWidth +'px';
                cover.style.top= document.documentElement.scrollTop + document.documentElement.clientHeight - cover.offsetHeight +'px';
            }
        }
    }
}
d_log.prototype.open=function(){
    this.cover.style.display='block';
    this.dialog.style.display='block';
}
d_log.prototype.close=function(){
    this.dialog.style.display='none';
    this.cover.style.display='none';
}

function getEl(selecter){//简易选择器,可以选择id,css,tag标签
    switch(typeof selecter){
        case 'string':
            if(/^#([\w-]+)$/.test(selecter))//匹配id选择器
                return document.getElementById(selecter.replace('#',''));
            else if(/^\.([\w-]+)$/.test(selecter)){//匹配css选择器，返回数组集合
                if(document.getElementsByClassName)
                    return document.getElementsByClassName(selecter.replace('.',''));
                else{//以下兼容ie5.5
                    var allEl=document.all?document.all:document.documentElement.getElementsByTagName("*"),result=[];
                    for(var i=0,len=allEl.length;i<len;i++){
                        if((' '+allEl[i].className+' ').indexOf(' '+selecter.replace('.','')+' ')!=-1)
                            result.push(allEl[i]);
                    }
                    return result;
                }
            }else if(/^([\w-]+)$/.test(selecter))//匹配标签选择器
                return document.getElementsByTagName(selecter).length==0?null:document.getElementsByTagName(selecter);
            else
                return null;
        case 'object'://对象直接返回
            return selecter;
        default:return null;
    }
}
function getStyle(el,styleName){//获取当前样式属性
    if(el.currentStyle)//ie
        return el.currentStyle[styleName];
    else{ //ff
        var arr=el.ownerDocument.defaultView.getComputedStyle(el, null);
        return arr[styleName];
    }
}
function getSize(elem) {//获取元素的宽高，包括隐藏元素的
    var width = elem.offsetWidth, height = elem.offsetHeight;
    if ( !width && !height ) {
        var style = elem.style;
        var cssShow ="position:absolute;visibility:hidden;display:block;left:-9999px;top:-9999px;";
        var cssBack ="position:"+style.position+";visibility:"+style.visibility+";display:"+style.display+";left:"+style.left+";top:"+style.top;
        elem.style.cssText=cssShow;
        width = elem.offsetWidth; height = elem.offsetHeight;
        elem.style.cssText=cssBack;
    }
    return { "width": width, "height": height };
}

这是页面调用方法

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lock page</title>
<meta name="author" content="www.planeart.cn" />
<link rel="stylesheet" type="text/css" href="style/css/j_dialog.css" />
<style>
body {padding:0; margin:0; font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,form, fieldset, legend, button, input, textarea,th, td {margin: 0;padding: 0;}
button, input, select, textarea {font: 12px/1.5 tahoma, arial, simsun, sans-serif;}
h1, h2, h3, h4, h5, h6 { font-size: 100%;font-weight:normal; }
address, cite, dfn, em, var { font-style: normal; }
code, kbd, pre, samp { font-family: courier new, courier, monospace; }
small { font-size: 12px; }
ul, ol { list-style: none; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
legend { color: #000; }
fieldset, img { border: 0; }
button, input, select, textarea { font-size: 100%; }
table { border-collapse: collapse; border-spacing: 0; }
.clear {clear:both;}
html { overflow:-moz-scrollbars-vertical; }
    a { text-decoration: none;}
    a:hover { text-decoration: underline;}

#pageOverlay {overflow:hidden;display:none;position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; }
.pageDialog{border: 4px solid #999999;display:none;position:fixed; top:40%; left:50%; z-index:1988; width:400px; background:#fff;}
.pageDialog h3{padding-left:10px;overflow:hidden;font-size:14px;font-weight:normal;height:25px;line-height:25px;background:#666;color:#fff;zoom:1;}
.pageDialog h3 a{float:right;color:#ddd;display:inline;font-weight:bold;width:20px;text-align:center;margin-right:5px;}
.pageDialog h3 a:hover{ text-decoration: none;color:#fff;}
.pageDialog span{margin:10px;display: block;}
.pageDialog  .confirm,.pageDialog  .concel{display:inline-block;background:url(../images/DialogBtn.png) no-repeat;width:45px;height:25px;text-align:center;line-height:25px;font-weight:bold;margin-right:10px;}
.pageDialog  .confirm:hover,.pageDialog  .concel:hover{ text-decoration: none;}
.pageDialog  .confirm{background-position:0 0;color:#fff;}
.pageDialog  .concel{background-position:-45px 1px;color:#000;display:none;}
#oprate{margin:20px 0 10px 0;text-align:center;}
/*IE6 fixed*/
* html { background:url(about:blank) fixed; }  
* html body { margin:0; height:100%; }
* html  #pageOverlay {position:absolute; }
</style>
<script type="text/javascript" src="style/js/j_dialog.js"></script>
</head>

<body>
<ol id="test">
<li><a href="javascript:dlg1.open();">点击我试试</a></li>
<li><a href="javascript:dlg2.open();">点击我试试</a></li>
</ol>
<select><option>abcd</option></select>
<div id="owp" style="height:200px;">这是第二个测试例子！<a href="javascript:dlg2.close();">x</a></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
<script>
var dlg1=d_log({con:'<span>确定要删除此文件吗？</span>',confirm:'check'});//自动生成的dialog
var dlg2=d_log({wrap:'#owp'});//自定义的dialog
function check(){
    alert('test!');
}
</script>