<title>showdiv</title>
<!--This is style--
<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;/* Transparency---value [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" >
Eject hidden layer
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 ();
}
Close the popup layer
function Closediv (SHOW_DIV,BG_DIV)
{
document.getElementById (show_div). style.display= ' None ';
document.getElementById (bg_div). style.display= ' None ';
};
</script>
<body>
<!--trigger Button--
<a onclick= "Showdiv (' mainproduct ', ' fade ')" class= "BTN" >Open</a>
<!--display Content section--
<div id= "Fade" class= "Black_overlay" > This is the masking layer </div>
<div id= "mainproduct" class= "White_content" >
------Fill in-----Part--------can be a form oh
<div class= "main" style= "width:100%;height:350px;overflow-y:scroll;overflow-x:hidden;border:1px solid gray;" >
Middle section <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>
Easy-to-use div popup layer
