[原创]透明的DIV提示框(兼容IE与Firefox)

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

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

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

<html>

<head>

<style>

body{

margin:0px;

}

</style>

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>

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

</body>

</html>

运行效果:

点击弹出提示框

Tag标签: JavaScript,DIV提示框

posted on 2008-06-26 22:51 Star.Stroll 阅读(558) 评论(7) 编辑收藏所属分类: W3C

与我联系

搜索

常用链接

留言簿

随笔分类

随笔档案

最新评论

阅读排行榜

评论排行榜