实现div提示框且背景变暗的JS类

Dec 25	实现div提示框且背景变暗的JS类
	Categories: Js/AJAX \| Tags: div提示框, Js/AJAX \| Views: 2,896

这两天写出来的, 其实一直想实现这样的效果, 就像wp后台那样, 用div提示框,且背景变暗不可操作, 这样的代码不是不好实现, 只是要把它封装起来, 能供以后调用不好弄, 我把它封装了一下, 以后直接调用就行了, 这样以后就可以告别js的alert和vbscript的msgbox了.

实现思路: 先加一个背景层, 让它透明, 再加提示框层. 然后再在提示框里插入文字或者元素.

调用方式:

1.单行(语句)调用:

1	<a href="javascript:;" onclick={(new divAlert("aaaa")).open();}>效果</a>

2.设置宽度和背景透明度:

1	<a href="javascript:;" onclick={var a=new divAlert("就是这样的效果"); a.setWidth(100); a.setOpacity(30); a.open(); }>效果</a>

3.向提示内容中添加元素(如按钮等):

1
2
3

<a href="javascript:;" 
onclick={ var a=new divAlert("就是这样的效果<input value=sure type=button onclick=$this.close() />"); a.open();}>
效果</a>

4.设置各层的样式:

1
2
3

<a href="javascript:;" 
onclick={var a=new divAlert("就是这样的效果"); a.bgdiv.style.backgroundColor="#f00"; a.open();}>
效果</a>

5.设定返回值:

<a href="javascript:;" 
onclick={var a=new divAlert("就是这样的效果<input type=button value=yes onclick={$this.returnValue=\"yes\";$this.close();} /><input type=button value=no onclick={$this.returnValue=\"no\";$this.close();} />"); a.open();}>
效果</a> 
<a href="javascript:;" 
onclick={var a=new divAlert();if(a.returnValue!="")alert(a.returnValue);}>
查看返回值</a>

代码:

/*************************************************
*
*    class divAlert
*    功能：div形式的提示框，且背景变暗，不可操作
*    作者：pwwang
*    网站：http://pwwang.com
*    参数：str: 提示框的内容
*
**************************************************/
function divAlert(str){ this.init(str); }
 
$this = divAlert.prototype;
 
$this.str = "";          //提示框的内容，可以用html代码插入元素，也可以通过appendChild插入
$this.startX = 0;         //拖拽开始的坐标
$this.startY = 0;
$this.dragFlag = false; //拖拽的标志变量
$this.width = 360;        //提示框的宽度
$this.returnValue = "";    //返回值
 
//生成半透明的背景层, 并设置样式
$this.bgdiv = document.createElement("div");
$this.bgdiv.style.position = "absolute";
$this.bgdiv.style.top = 0;
$this.bgdiv.style.left = 0;
$this.bgdiv.style.zIndex = 9999;
$this.bgdiv.style.filter = "alpha(opacity=80)";
$this.bgdiv.style.backgroundColor = "#999";
$this.bgdiv.style.width = document.documentElement.clientWidth  + "px";
$this.bgdiv.style.height = document.documentElement.clientHeight + "px";
 
//生成提示框外框
$this.outdiv = document.createElement("div");
$this.setWidth = function(w){ //给出宽度设置接口, 一并设置宽度关联的css
    $this.width = w;
    $this.outdiv.style.width = $this.width + "px";
    $this.outdiv.style.marginLeft = (0-$this.width/2) + "px"; //由于初始位置要居中
}
$this.outdiv.style.position = "absolute";
$this.outdiv.style.left = "50%";
$this.outdiv.style.top = "20%";
$this.outdiv.style.border = "1px solid #369";
$this.outdiv.style.zIndex = 10000;
$this.setWidth($this.width);
 
//生成提示框标题
$this.titdiv = document.createElement("div");
$this.titdiv.style.textAlign = "right";
$this.titdiv.style.backgroundColor = "#9cf";
$this.titdiv.style.padding = "8px"
$this.titdiv.style.cursor = "move";
$this.titdiv.onmousedown = function(e){ //拖拽开始,记录开始的坐标
    e = e ? e : window.event;
    $this.dragFlag = true;
    $this.startX = (e.layerX ? e.layerX : e.offsetX) - $this.outdiv.offsetWidth/2;
    $this.startY = e.layerY ? e.layerY : e.offsetY;
}
$this.titdiv.onmousemove = function(e){ //拖拽
    e = e ? e : window.event;
    if($this.dragFlag){
        if(!e.pageX) e.pageX = e.clientX;
        if(!e.pageY) e.pageY = e.clientY;
        $this.outdiv.style.left = (e.pageX - $this.startX) + "px"; 
        $this.outdiv.style.top = (e.pageY - $this.startY) + "px"; 
 
    }
}
$this.titdiv.onmouseup = function(){ $this.dragFlag = false;} //弹出鼠标,停止拖拽
 
//生成提示框内容
$this.condiv = document.createElement("div");
$this.condiv.style.backgroundColor = "#fff";
$this.condiv.style.textAlign = "center";
$this.condiv.style.padding = "12px";
$this.condiv.style.height = "200px";
 
//生成关闭按钮
$this.clsbtn = document.createElement("a"); //用a,input,span均可
$this.clsbtn.innerHTML = "关闭";
$this.clsbtn.style.cursor = "pointer";         //手形指针
$this.clsbtn.style.fontSize = "12px";
 
$this.clsbtn.onclick = function(){ $this.close(); }
 
$this.init = function(str){ this.str = str;}
 
$this.open = function(){    //显示提示框
    document.body.appendChild(this.bgdiv);
    document.body.appendChild(this.outdiv);
    this.outdiv.appendChild(this.titdiv);
    this.outdiv.appendChild(this.condiv);
    this.titdiv.appendChild(this.clsbtn);
    this.condiv.innerHTML = this.str;
}
 
$this.close = function(){ //关闭提示框
    this.outdiv.removeChild(this.titdiv);
    this.outdiv.removeChild(this.condiv);
    this.titdiv.removeChild(this.clsbtn);
    document.body.removeChild(this.bgdiv);
    document.body.removeChild(this.outdiv);
}