<html>
<head>
<title>showdiv</title>
<!--这是样式-->
<style type="text/css">
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: gray;
z-index:1001;
-moz-opacity: 0.8;
opacity:0.5;/*透明度---取值[0.0,1.0]*/
filter:alpha(opacity=0.9);
}
.white_content {
display: none;
position: fixed;
top: 15%;
left: 15%;
width: 70%;
height: 400px;
padding: 1%;
border: 1px solid lightblue;
background-color: white;
z-index:1002;
min-height:400px;
}
.btn{
cursor:pointer;
}
</style>
<script type="text/javascript">
//弹出隐藏层
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display=‘block‘;
document.getElementById(bg_div).style.display=‘block‘ ;
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth;
$("#"+bg_div).height($(document).height());
// bgdiv.style.height = $(document).height();
}
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display=‘none‘;
document.getElementById(bg_div).style.display=‘none‘;
};
</script>
<body>
<!-- 触发按钮 -->
<a onclick="ShowDiv(‘mainProduct‘,‘fade‘)" class="btn">Open</a>
<!-- 显示内容部分 -->
<div id="fade" class="black_overlay">这是遮挡层</div>
<div id="mainProduct" class="white_content">
------填内容-----部分--------可以是表单哦
<div class="main" style="width:100%;height:350px;overflow-y:scroll;overflow-x:hidden;border:1px solid gray;">
中间部分<br/>
</div>
<div class="bottom" style="text-align: right; margin-bottom:5px;">
<a class="btn" onclick="javascript:saveMainPro();">Save</a>
<a class="btn" onclick="CloseDiv(‘mainProduct‘,‘fade‘)">Cancel</a>
</div>
</div>
</body>
</html>