浏览器给我们提供了几种对话框,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>
<a href="javascript:void(0)" onClick="test();">click</a>
</body>
</html>
运行效果:
点击弹出提示框
(1)按钮数量与其上面显示的文字不可改变.
(2)对话框样式单调不好看.
(3)对话框内只能显示文字.
因为以上原因很多网站都选择使用Javascript+CSS编写自己的DIV对话框,DIV对话框不但好看而且能完成大部分的业务需求,于是我也开始试着编写这样的对话框,以下是我个人编写的一个DIV对话框例子:
<html><head><style>
body{
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><a href="javascript:void(0)" onClick="test();">click</a></body></html>运行效果:
点击弹出提示框
