转载一个不错的js弹出div效果http://www.jb51.net/article/14885.htm-CSDN博客

转载一个不错的div弹出框效果，原链接：http://www.jb51.net/article/14885.htm

<html>
<head>
<meta charset="UTF-8">
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
      display: none;
   position: absolute;
   top: 0%;
   left: 0%;
   width: 100%;
   height: 100%;
   background-color: black;
   z-index:1001;
   -moz-opacity: 0.8;
   opacity:.50;
   filter: alpha(opacity=80);
}
.white_content {
      display: none;
   position: absolute;
   top: 25%;
   left: 30%;
   width: 40%;
   height: 50%;
   border: 4px solid #cee;
   background-color: white;
   z-index:1002;
   overflow: auto;
}
</style>
<script>
     function show(){
    document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';
}
function disappear(){
    document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';
}
</script>
</head>
<body>
<p>可以根据自己要求修改css样式
<a href="javascript:show()" >点击这里打开窗口</a></p>
<div id="light" class="white_content">
    <div class="head" style="background:#cea;height:30px;line-height:30px;padding-left:50px;">请选择水果</div>
<div class="fruits" style="margin-top:20px;padding-left:50px;">
   <select name="fruitName" id="fruitId" >
      <option value="苹果">苹果</option>
      <option value="西红柿">西红柿</option>
      <option value="菠萝">菠萝</option>
      <option value="西瓜">西瓜</option>
      </select>
   <span id="yes" style="padding-left:30px;">
<input type="button" value="确定" οnclick="javascript:disappear()" ></a>
   </span>
</div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>