jquery写一个弹出框及遮罩层效果

HTML：

 
 
 
 
 
 
 
 
 
   
   
   

   

    
    X
    
    哈哈哈哈哈哈哈
   
 
 

javascript：

CSS：

 /*遮罩层样式*/
.mask{
  display:none;
  position:absolute;
  z-index:10;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:#666;
  opacity:0.5;
  -moz-opacity:0.5;
  filter:alpha(opacity=50)
}
/*弹出框样式*/
.box{
  z-index:999;
  display:none;
  position: relative;
  width:340px;
  height:180px;
  border:solid 1px #999;
  border-radius:5px;
  background-color:#fff;
  box-shadow:0 0 0 1px #00aff0;
  text-align:center;
  padding-top: 20px;
}
/* 关闭按钮 */
.open {
  position: absolute;
  top: 0;
  right: 10px;
}
/*按钮样式*/
input{
  display:block;
  width:100px;
  height:30px;
  outline:none;
  cursor:pointer;
  font-size:16px;
}