Javascript DIV菜单代替alert

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
  #mydemo{
   border:1px solid #333;
   300px;height:250px;
   display:none;
   /*绝对定位*/
   position:absolute;
   background-color:#fff;
  }
  .btn{
   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>

作者：Wicub

出处：http://www.cnblogs.com/wicub

免责声明：文章、笔记等仅供分享、探讨、参考等学习之用，因此造成的任何后果概不负责。（如有错误、疏忽等问题，欢迎指正、讨论，谢谢）

本文版权归作者和博客园共有，欢迎转载，但请务必在文章页面明显位置给出原文连接，谢谢配合。