一个提示窗口的对话框

/*mask the whole page*/

.mask {
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .3;
  filter:alpha(opacity:30);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}


/*part1: show*/
.show {
  position: absolute;
  z-index: 101;
  left: 0;
  top: 0;
  line-height: 100px;
  background: #fff;
  border: 1px solid firebrick;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  text-align: center;
}
.show .close {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 20px;
  height: 20px;
  width: 20px;
  line-height: 20px;
}





/*part2 showModal*/
.showModal{
  position: absolute;
  z-index: 101;
  left: 0;
  top: 0;
  width: 200px;
  height: 100px;
  background: #fff;
  border: 1px solid firebrick;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  text-align: center;
}
.showModal .title{
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.showModal input{
  margin-top: 50px;
}


/*part3 showBubble */
.showBubble{
  position: absolute;
  left: 0;
  top: 20px;
  width: 50px;
  height: 25px;
  line-height: 25px;
  border:1px solid black;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

.showBubble .tri1{
  position: absolute;
  left: 5px;
  top: -10px;
  width: 0;
  height: 0;
  border:5px solid;
  border-color:transparent transparent black transparent;
}
.showBubble .tri2{
  position: absolute;
  left: 5px;
  top: -9px;
  width: 0;
  height: 0;
  border:5px solid;
  border-color:transparent transparent #fff transparent;
}

#box{
  position: relative;
}

　　js部分

var $= function () {}
var jq=new $();
/*mask make a grey mask in window and hidden the scrollbar*/
$.prototype.mask= function () {
    var mask=document.createElement('div');
    mask.id='mask';
    mask.className='mask';
    document.body.appendChild(mask);
}

$.prototype.move= function (obj,json,interval) {
    obj.timer&& clearInterval(obj.timer);
    obj.timer=setInterval(function () {
        var stop=true;
        for(var i in json){
            var tar=json[i];
            var cur=parseInt(jq.getcss(obj,i));
            var speed=(tar-cur)/7;
            speed=(speed>0)?Math.ceil(speed):Math.floor(speed);
            if(i=='zIndex'){
                obj.style[i]=tar;
            } else{
                if(cur!=tar){
                    stop=false;
                    obj.style[i]=cur+speed+'px';
                }
            }
        }
        if(stop){
            clearInterval(obj.timer);
            obj.timer=null;
        }
    },interval);
}

$.prototype.getcss= function (obj,attr) {
    if(window.getComputedStyle){
        return window.getComputedStyle(obj,false)[attr];
    }else{
        return obj.currentStyle[attr];
    }
}


/*dialog can make a dialogBox to show user some info*/

function Dialog(json){
    for(var i in json){
        this[i]=json[i];
    }
}

Dialog.prototype.show= function () {

    var dialogBox=document.createElement('div');
    dialogBox.id='dialogBox';
    var close=document.createElement('span');

    close.className='close';
    close.innerHTML='x';

    close.onclick=function(){
        document.body.removeChild(dialogBox);
    }

    dialogBox.className='show';
    dialogBox.innerHTML=this.content;

    document.body.appendChild(dialogBox);
    dialogBox.appendChild(close);

    dialogBox.style.left=(document.documentElement.clientWidth)/2+'px';
    dialogBox.style.top=(document.documentElement.clientHeight)/2+'px';

    jq.move(dialogBox,{
        'marginLeft':'-100',
        'marginTop':'-50',
        'width':'200',
        'height':'100'
    },10)

}

Dialog.prototype.showModal= function () {
    var dialogBox=document.createElement('div');
    dialogBox.id='dialogBox';
    var input=document.createElement('input');
    var title=document.createElement('div');

    input.className='input';
    title.className='title';
    title.innerHTML=this.title;

    dialogBox.appendChild(title);
    dialogBox.appendChild(input);
    dialogBox.appendChild(title);

    input.style.marginTop='20px';
    dialogBox.appendChild(input);
    dialogBox.className='showModal';
    document.body.appendChild(dialogBox);

    //to center the DialogBox
    dialogBox.style.left=(document.documentElement.clientWidth-dialogBox.offsetWidth)/2+'px';
    dialogBox.style.top=(document.documentElement.clientHeight-dialogBox.offsetHeight)/2+'px';

}


Dialog.prototype.showBubble= function (dom) {

    var tri1=document.createElement('div');
    var tri2=document.createElement('div');
    var msg=document.createElement('div');
    var showBubble=document.createElement('div');

    showBubble.id='dialog';

    tri1.className='tri1';
    tri2.className='tri2';
    msg.innerHTML='msgbox';
    showBubble.className='showBubble';

    showBubble.appendChild(tri1);
    showBubble.appendChild(tri2);
    showBubble.appendChild(msg);
    dom.appendChild(showBubble);
}


Dialog.prototype.close= function () {
    var cancel=document.getElementById('dialogBox');
    document.body.removeChild(cancel);
}
var box=new Dialog({
    'title':'title',
    'content':'content'
});

//show method  box.show();
//showModal   box.showModal();
//showBubble  box.showBubble(); need a dom para

box.showBubble(document.getElementById('box'))