Javascript DIV菜单代替alert
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#mydemo{
border:1px solid #333;
width:300px;height:250px;
display:none;
/*绝对定位*/
position:absolute;
background-color:#fff;
}
.btn{
width:80px;
height:40px;
border:1px solid #333;
}
</style>
<script type="text/javascript">
var mask;
function myAlert(msg){
//alert("aaaa");
var obj=document.getElementById("mydemo");
obj.style.display="block";
//算应该显在哪儿
//浏览器高度
var h=document.documentElement.clientHeight;
var w=document.documentElement.clientWidth;
// 浏览器的宽度/2-元素自身宽度的一半
var left=w/2-300/2;
obj.style.left=left+"px";
var top=h/2-250/2;
obj.style.top=top+"px";
//弄一个层，挡住
var div=document.createElement("div");
div.style.width="100%";
div.style.height="100%";
div.style.position="absolute";
div.style.top="0px";
div.style.left="0px";
div.style.backgroundColor="#333";
div.style.opacity=0.5;
div.style.filter="alpha(opacity=50)";
div.style.zIndex=9999;
obj.style.zIndex=10000;
document.body.appendChild(div);
mask=div;
}
function closedemo(){
mask.parentNode.removeChild(mask);
document.getElementById("mydemo").style.display="none";
}
</script>
</head>
<body>
<a href="javascript:;" onclick="myAlert('你好呀')">弹弹弹</a>
<a href="http://bbs.lampbrother.net">bbs</a>
<div id="mydemo">
<div>系统提示</div>
<div >内容</div>
<div class="btn" onclick="closedemo()">确定</div>
</div>
</body>
</html>
