星零
No reason. I just like it.
浏览器给我们提供了几种对话框,alert(),confirm()...这些对话框虽然易用但是同时有几个缺点:

(1)按钮数量与其上面显示的文字不可改变.
(2)对话框样式单调不好看.
(3)对话框内只能显示文字.

因为以上原因很多网站都选择使用Javascript+CSS编写自己的DIV对话框,DIV对话框不但好看而且能完成大部分的业务需求,于是我也开始试着编写这样的对话框,以下是我个人编写的一个DIV对话框例子:

<html>

<head>
<style>
body
{
    margin
:0px;
}
    
</style>
<title></title>
<script>

function DivAlert(messageDiv){
    
this.messageDIV=messageDiv;
    
//创建提示框底层 
    this.bottomDIV = document.createElement("div");
    
    
//获取body中间点
    var x=document.body.clientWidth/2,y=document.body.clientHeight/2;

    
//配置样式
    this.bottomDIV.style.opacity="0.50";
    
this.bottomDIV.style.filter="Alpha(opacity=50);";
    
this.bottomDIV.style.backgroundColor="#CCCCCC";
    
this.bottomDIV.style.height=
document.body.scrollHeight+"px";
    this.bottomDIV.style.width="100%";
    
this.bottomDIV.style.marginTop="0px";
    
this.bottomDIV.style.marginLeft="0px";
    
this.bottomDIV.style.position="absolute";
    
this.bottomDIV.style.top="0px";
    
this.bottomDIV.style.left="0px";
    
this.bottomDIV.style.zIndex=100;

    
//显示提示框
    this.show = function(){
        
//显示提示框底层 
          document.body.appendChild(this.bottomDIV);
        
//显示messageDIV
        document.body.appendChild(this.messageDIV);
        
//把messageDIV定位到body中间
        this.messageDIV.style.position="absolute";
        x
=x-this.messageDIV.clientWidth/2;
        y=y-this.messageDIV.clientHeight/2;
        this.messageDIV.style.top=y+"px";
        
this.messageDIV.style.left=x+"px";
        
this.messageDIV.style.zIndex=101;
      }

      
    
//移除提示框
      this.remove = function(){
          document.body.removeChild(
this.bottomDIV);
        document.body.removeChild(
this.messageDIV);
      }

}




//测试DivAlert对象
var dc;
function test(){
     
//创建提示框内容部分
     var d = document.createElement("div");
     d.style.width
="220px";
     d.style.height
="150px";
     d.style.backgroundColor
="#AA00CC";
     d.style.padding
="10px";

     
//向提示框内容部分画需要显示的信息
     d.innerHTML="Hello World<br/><input type=\"button\" style=\"color:#cc4044\" value=\"close this DivAlert\" onclick=\"test2()\"/>"
     
     
//实例化提示框
     dc = new DivAlert(d);
     
//显示提示框
     dc.show();
}


//提示框里的Button按钮点击事件
function test2(){
    
//移除对话框
    dc.remove();
}

</script>
</head>

<body>
<href="javascript:void(0)" onClick="test();">click</a>
</body>

</html>

运行效果:

点击弹出提示框
posted on 2008-06-26 22:51  Star.Stroll  阅读(4370)  评论(8编辑  收藏  举报