自制javascript漂亮弹出窗口

    我在用javascript的时候经常会用到alert();confirm;这样的函数调用系统的对话框。最近闲着无聊于是就自制了一套系统消息窗口，现开源出来。我是一个无名小卒，代码写得很烂，很多地方都要改。

演示地址：http://61.139.87.60/psbird/window/

源代码地址：http://javascriptwindow.googlecode.com/svn/trunk/

效果图：

javascript 代码：

//蓝鸟 原创 QQ:18844626
//version:1.0
function bluebirdWindow(){}
bluebirdWindow.prototype={
    w_window:null,
    //contentDiv:null;
    w_title:'系统窗口',
    init:function(){
        this.w_window=$C('div',{'class':'bluebirdWindow'});
        var closeImg=$C('div',{'class':'closeimg'});
        eve.observe(closeImg,'mouseover',function(){closeImg.className='closeimg_over'});
        eve.observe(closeImg,'mouseout',function(){closeImg.className='closeimg'});
        eve.observe(closeImg,'click',this.closeWindow.bind(this));
        this.block=$C('div',{'class':'shadow'});
        this.block.style.height=document.body.offsetHeight+'px';//整个主窗口被蒙上阴影
        this.w_window.appendChild($C('div',{'class':'closediv'},closeImg));
        this.w_window.appendChild(this.createHtml());
        this.contentDiv.style.width=this.w_width+'px';
        this.w_window.style.top=document.documentElement.scrollTop+100+'px';
        this.w_window.style.left='-1000px';
        document.body.appendChild(this.block);
        document.body.appendChild(this.w_window);
        var w_width=this.w_width||this.w_window.clientWidth;
        this.w_window.style.left=parseInt((document.body.clientWidth-w_width)/2)+'px';
        new psbirdDrag(this.w_window.getElementsByTagName('td')[1],this.w_window);
    },
    createHtml:function(){
        this.contentDiv=$C('div',{'class':'w_content'},this.innerDiv);
        return $C('table',{'cellPadding':'0','cellSpacing':'0'},$C('tbody',{},$C('tr',{},$C('td',{'class':'w_all'},$C('img',{'src':'images/window/lt_corner.gif'})),$C('td',{'class':'w_all t_bg'},$C('div',{'class':'w_title'},this.w_title)),$C('td',{'class':'w_all'},$C('img',{'src':'images/window/rt_corner.gif'}))),$C('tr',{},$C('td',{'class':'w_all l_bg'}),$C('td',{'class':'w_center'},this.contentDiv),$C('td',{'class':'w_all r_bg'})),$C('tr',{},$C('td',{'class':'w_all lrb_corner'}),$C('td',{'class':'w_all b_bg'}),$C('td',{'class':'w_all lrb_corner moveposition'}))));       
    },
    closeWindow:function(){
        document.body.removeChild(this.block);
        document.body.removeChild(this.w_window);
    }
};
Function.prototype.bind=function(obj){//改变this
    var t=this;
    return function(){
        return t.apply(obj,arguments);
    }
}
var bluebirdDialog=new Object();
bluebirdDialog.warn=function(str,cssName,titlestr,w_width){
    var frame=new bluebirdWindow();
    frame.w_width=w_width;
    frame.w_title=titlestr;
    frame.innerDiv=$C('table',{'width':'100%'},$C('tbody',{},$C('tr',{},$C('td',{'class':'w_imgtd '+cssName},str)),$C('tr',{},$C('td',{'class':'cen'},this.createButton('确定',frame.closeWindow.bind(frame),emptyFunc,frame)))));
    frame.init();   
}
bluebirdDialog.alert=function(str,w_width){
    this.warn(str,'w_alert','系统提示',w_width||300);
}
bluebirdDialog.error=function(str,w_width){
    this.warn(str,'w_error','出错了',w_width||300);
}
bluebirdDialog.ok=function(str,w_width){
    this.warn(str,'w_ok','成功了',w_width||300);
}
bluebirdDialog.info=function(str,w_width){
    this.warn(str,'w_info','系统消息',w_width||300);
}
bluebirdDialog.confirm=function(str,btnObj,w_width){
    var btnTd=$C('td',{'class':'cen'});
    var frame=new bluebirdWindow();
    for(var btn in btnObj)
        btnTd.appendChild(this.createButton(btn,btnObj[btn],frame.closeWindow.bind(frame)));
    frame.w_width=w_width||400;
    frame.w_title='网页对话框';
    frame.innerDiv=$C('table',{'width':'100%'},$C('tbody',{},$C('tr',{},$C('td',{'class':'w_imgtd w_confirm'},str)),$C('tr',{},btnTd)));
    frame.init();
}
bluebirdDialog.createButton=function(val,act,closeAct){
    var btn=$C('input',{'class':'btn','type':'button','value':val});
    eve.observe(btn,'click',act);
    eve.observe(btn,'click',closeAct);
    switchEffect(btn,'btn_over');//鼠标移入移出效果
    return btn;
}
bluebirdDialog.html=function(inHtml,w_title,w_width){
    //var btnTd=$C('td',{'class':'cen'});
    var frame=new bluebirdWindow();
    //frame.w_width=500;
    frame.w_width=w_width||500;
    frame.w_title=w_title||'系统窗口';
    frame.innerDiv=$C('table',{'width':'100%'},$C('tbody',{},$C('tr',{},$C('td',{},inHtml))));
    frame.init();
    return frame.closeWindow.bind(frame);
}
function psbirdDrag(hotArea,wholeArea){//需要改进
    var self=this;
    this.divX=0;
    this.divY=0;
    this.mouseX=0;
    this.mouseY=0;
    this.initialize=function(e){
        var divPosition=self.getPosition(wholeArea);
        self.divX=divPosition[1];
        self.divY=divPosition[0];
        self.mouseX=e.clientX;
        self.mouseY=e.clientY;
        eve.observe(document.body,'mousemove',self.drag);
        eve.observe(document.body,'mouseup',self.stopDrag);
        eve.observe(document.body,'select',self.noselect);
    }
    this.drag=function(e){
        var mx=e.clientX-self.mouseX;
        var my=e.clientY-self.mouseY;
        wholeArea.style.left=self.divX+mx+'px';
        wholeArea.style.top=self.divY+my+'px';
        self.divX+=mx;
        self.divY+=my;
        self.mouseX+=mx;
        self.mouseY+=my;
    }
    this.stopDrag=function(){
        eve.stopObserve(document.body,'mousemove',self.drag);
        eve.stopObserve(document.body,'mouseup',self.stopDrag);
        eve.stopObserve(document.body,'select',self.noselect);
    }
    this.getPosition=function(obj){
        return [obj.offsetTop,obj.offsetLeft];
    }
    this.noselect=function(){
        document.selection.empty();
    }
    eve.observe(hotArea,'mousedown',self.initialize);
}
function $C(eName,propertys){//DOM对象创建函数。
    var childObj,argLen=arguments.length;
    var domAttr;
    var tmpObj=document.createElement(eName);
    var fix={'class':'className','colspan':'colSpan','rowspan':'rowSpan'};
    for(var pro in propertys){
        domAttr=fix[pro]||pro;
        tmpObj[domAttr]=propertys[pro];
    }
    if(argLen==2)    return tmpObj;
    for(var i=2;i<argLen;i++){
        childObj=arguments[i];
        if('string'==typeof(arguments[i]))
        tmpObj.innerHTML+=arguments[i];
        else{
            try{
                tmpObj.appendChild(childObj);
            }catch(e){
                if('number'==typeof(arguments[i]))
                    tmpObj.innerHTML=arguments[i]+'';
                else
                    alert('创建'+eName+'参数中参数:'+arguments[i]+'有问题');
            }
        }
    }
    return tmpObj;
}
var eve=new Object();//事件绑定
eve.observe=function(element,name,observer){
    if(browser.ie)
        element.attachEvent("on"+name,observer);
    else
        element.addEventListener(name,observer,false);
}
eve.stopObserve=function(element,name,observer){
    if(browser.ie)
        element.detachEvent("on"+name,observer);
    else
        element.removeEventListener(name,observer,false);
       
}
var browser=(function(){//浏览器判断
    var b=navigator.userAgent.toLowerCase();
    return {
    safari:/webkit/.test(b),
    opera:/opera/.test(b),
    ie:/msie/.test(b) && !/opera/.test(b),
    mozilla:/mozilla/.test(b) && !/(compatible|webkit)/.test(b)
};})();

function emptyFunc(){}
function $(id){
    return document.getElementById(id);
}

function switchEffect(elem,cname){//靠CSS和鼠标移入移出事件来达到两种效果替换
    (new ourMouseover(elem,cname)).init();
}
function ourMouseover(elem,cname){
    this.element=elem;
    this.cname=cname;
    isOver=false;//是否onmouseover
}
ourMouseover.prototype={
    init:function(){
        eve.observe(this.element,'mouseover',this.mouseOver.bind(this),false);
        eve.observe(this.element,'mouseout',this.mouseOut.bind(this),false);
    },
    mouseOver:function(){
        if(true==this.isOver)    return;
        addClass(this.element,this.cname);
        this.isOver=true;
    },
    mouseOut:function(){//可以不用判断是否已经mouseout
        removeClass(this.element,this.cname);
        this.isOver=false;
    }
};
function addClass(elem,cName){//增加一个className
    if(elem.className.indexOf(cName)>=0)    return;//如果已经有了这个classname,return
    var s=(elem.className=='')?'':' ';
    elem.className+=s+cName;
}
function removeClass(elem,cName){//去掉一个className
    var t=elem.className.indexOf(cName);
    if(cName==elem.className)    return elem.className='';
    var s='';
    if(-1==t)    return;
    if(0==t)
        s=cName+' ';
    else
        s=' '+cName;
    elem.className=elem.className.replace(s,'');
}

CSS代码：

body{font-size:12px;padding:0;margin:0;}
.pointer{cursor:pointer;}
.cen{text-align:center;}
.bold{font-weight:bold;}
.red{color:red;}
.hide{display:none;}
.block{display:block;}
.clear{clear:both;}
.w_all{filter:alpha(opacity=80);opacity:0.8;}
.shadow{left:0;top:0;width:100%;height:100%;background-color:#fff;filter:alpha(opacity=30);opacity:0.3;}
.shadow,.bluebirdWindow{position:absolute;}
.lrb_corner{width:7px;height:7px;background:url('../images/window/lrb_corner.gif') no-repeat;}
.moveposition{background-position:-6px 0;}
.b_bg{height:7px;background:url('../images/window/b_bg.gif') repeat-x;}
.t_bg{height:31px;background:url('../images/window/t_bg.gif') repeat-x;cursor:move;}
.w_center{padding:1px;}
.w_content{padding:10px;background-color:white;overflow:auto;}
.closediv{position:absolute;right:18px;float:right;width:44px;height:31px;}
.closeimg{height:19px;background:url('../images/window/close.gif') no-repeat;}
.closeimg_over{height:19px;background:url('../images/window/close.gif') 0 -19px no-repeat;cursor:pointer;}
.r_bg{width:7px;background:url('../images/window/r_bg.gif') repeat-y;}
.w_title{float:left;height:31px;background:url('../images/window/w_icon.gif') 10px 8px no-repeat;padding-left:30px;line-height:31px;font-size:12px;font-weight:bold;}
.l_bg{width:7px;background:url('../images/window/l_bg.gif') repeat-y;}
.w_imgtd{padding-left:100px;background-repeat:no-repeat;font-size:12px;height:100px;}
.btn{margin:0 5px 0 5px;width:67px;height:27px;border:none;background:url('../images/window/button_bg.gif') no-repeat;line-height:27px;}
.btn_over{background-position:0 -27px;}
.w_alert{background-image:url('../images/window/warn.gif');}
.w_confirm{background-image:url('../images/window/ask.gif');}
.w_error{background-image:url('../images/window/error.gif');}
.w_ok{background-image:url('../images/window/ok.gif');}
.w_info{background-image:url('../images/window/information.gif');}

使用方法：

1。普通弹出窗口：直接使用 如：bluebirdDialog.alert('消息');等

2。如果有按钮事件，则把按钮以对象的方式传入{'按钮value':'事件','按钮value2':'事件2'}，

如：bluebirdDialog.confirm('测试功能:两键询问',{'确定':function(){bluebirdDialog.info('你点击的是确定键');},'取消':function(){bluebirdDialog.info('你点击的是取消键');}});

3。如果是HTML内容，则把html包含在一个dom里传入。格式是：bluebirdDialog.html(dom,title,width) title和width可选。方法会返回一个关闭窗口的函数，如果不需要在html内容里加入关闭按钮，用自带的窗口关闭按钮即可。如果要，则把返回的函数梆定到按钮上就可以了。

如：

    var closeBtn=$C('input',{'type':'button','value':'关闭','class':'btn'}); //新建一个按钮
    switchEffect(closeBtn,'btn_over');//为按钮增加鼠标移入移出效果
    var closeFunction=bluebirdDialog.html($C('div',{},'这是测试内容',$C('div',{'class':'cen'},closeBtn)),'可选标题');//返回关闭窗口函数。
    eve.observe(closeBtn,'click',closeFunction);//梆定该函数到按钮上。

如果有人觉得这个窗口还可以，请随便用，如果觉得很失败，请多指教少批评，谢谢！

另外，有的图片已经改了，源代码里的psd文件是最早的版本的。