简单弹框的实现

        今天在写前端网站的时候需要用到一个小小的弹出框，从网上找了找，发现都不是很简单，有点复杂，干脆自己写了一个，特别简单，只需要两步，下面简单讲述一下代码的实现，

body里面的简单布局代码如下：

<input id="Button1" type="button" value="点击弹出层" οnclick="ShowDiv('tk')" /> 
 <div id="tk"  style=" display: none;  position: absolute;  top: 10%;  left: 10%;  width: 80%;  height: 80%;  border: 16px solid lightblue;  background-color: blue;  z-index:1000;  overflow: auto;  ">  
<div style="text-align: right;  height: 40px;">  <span style="font-size: 16px;" οnclick="CloseDiv('tk')">关闭</span> </div>  

然后就是利用javaScript实现弹出框和关闭框的动作，代码如下：

<script type="text/javascript">  
//弹出隐藏层  
function ShowDiv(show_div){ document.getElementById(show_div).style.display='block'; };  
//关闭弹出层  
function CloseDiv(show_div){  document.getElementById(show_div).style.display='none'; };  
</script>  

一个简单的弹框便实现了。