html页面js实现页面弹框

1、按钮

<a class="button border-green button-little" onclick="javasrcipt:ShowDiv('MyDiv','fade')" >新增二级分类</a>

2、弹框内容
<!--弹出层时背景层DIV---start-->
<div id="fade" class="black_overlay"></div>
<div id="MyDiv" class="white_content">
<div style="text-align: right; cursor: default; margin-top:10px;margin-bottom:10px;">
<span style="font-size: 16px; margin-right: 17px; color: #56BE2D; font-weight: 600;cursor:pointer;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
</div>
<div class="itempanel" style=" margin-left: 13%;">
<div class="floatleft title" style="text-align: left;">二级分类名称：</div>
<div class="floatleft editor" style="font-size:16px;height: 24px;line-height: 24px;"><input type="text" id="label" name="label" placeholder="请输入二级分类名称"/></div>
<div class="floatleft message"></div>
<div class="clear"></div>
</div>
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3); margin-top: 39px;" width="90%" color=#ddd SIZE=2>
<div style="margin-bottom: 23px; margin-top: 23px; margin-left: 23%;">
<input type="button" class="greenbutton2" style="width: 123px;margin-left: 30px;" onclick="javasrcipt:goToAdd()" value="添加" style="width: 123px; margin-left: 20%; ">
<input type="button" class="greenbutton2" style="width: 123px;margin-left: 30px;" onclick="CloseDiv('MyDiv','fade')" value="取消" style="width: 123px; margin-left: 20%; ">
</div>
</div>
<!--弹出层时背景层DIV---end-->

3、js部分
//===================================弹框js部分 start by:songfayuan=========================================
//弹出隐藏层
function ShowDiv(show_div,bg_div){
var scrollHeight = document.body.scrollHeight; //文档高度
document.getElementById(bg_div).style.height=scrollHeight+'px';

document.getElementById(show_div).style.display='block';
document.getElementById(bg_div).style.display='block';
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById("label").value = '';
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
//关闭弹出层
function CloseDiv2()
{
document.getElementById("MyDiv").style.display='none';
document.getElementById("fade").style.display='none';
};
//===================================弹框js部分 end by:songfayuan=========================================

4、css部分
/* ===================================弹框css部分 start by:songfayuan========================================= */
.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=50);
}
.white_content {
display: none;
position: absolute;
top: 35%;
left: 36%;
width: 33%;
border: 2px solid #d3d3d3;
background-color: white;
z-index: 1002;
/* overflow: auto; */
}
.white_content_small {
display: none;
position: absolute;
top: 20%;
left: 30%;
width: 40%;
height: 50%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
/* ===================================弹框css部分 end by:songfayuan========================================= */

5、效果图