HTML pop-up div and move Center, detailed implementation code as follows, interested friends don't miss
The
code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
/* Pop-up layer of style*/
html,body {height:100%; margin:0px; font-size:12px;}
. mydiv {
Background-color: #ff6;
border:1px solid #f90;
Text-align:center;
line-height:40px;
font-size:12px;
Font-weight:bold;
z-index:99;
width:300px;
height:120px;
left:50%;/*ff ie7*/
Top:50%;/*ff ie7*/
Margin-left:-150px!important;/*ff IE7 The value is half the width of itself * * *
Margin-top:-60px!important;/*ff IE7 The value is half the height of itself * * *
margin-top:0px;
position:fixed!important;/*ff ie7*/
position:absolute;/*ie6*/
_top:expression (eval (document.compatmode &&
document.compatmode== ' Css1compat ')?
Documentelement.scrolltop + (document.documentelement.clientheight-this.offsetheight)/2:/*IE6*/
Document.body.scrollTop + (document.body.clientheight-this.clientheight)/2);/*IE5 ie5.5*/
}
. BG {
Background-color: #ccc;
width:100%;
height:100%;
left:0;
top:0;/*ff ie7*/
Filter:alpha (opacity=50);/*ie*/
opacity:0.5;/*ff*/
z-index:1;
Position:fixed!important;/*ff ie7*/
position:absolute;/*ie6*/
_top:expression (eval (document.compatmode &&
document.compatmode== ' Css1compat ')?
Documentelement.scrolltop + (document.documentelement.clientheight-this.offsetheight)/2:/*IE6*/
Document.body.scrollTop + (document.body.clientheight-this.clientheight)/2);/*IE5 ie5.5*/
}
/*the end*/
</style>
<script type= "Text/javascript" >
function Showdiv () {
document.getElementById (' Popdiv '). style.display= ' block ';
document.getElementById (' BG '). style.display= ' block ';
}
function Closediv () {
document.getElementById (' Popdiv '). style.display= ' None ';
document.getElementById (' BG '). style.display= ' None ';
}
</script>
</head>
<body>
<div id= "Popdiv" class= "mydiv" style= "Display:none"; > Title <br/> you know <br/>
<a href= "Javascript:closediv ()" > Close window </a></div>
<div id= "bg" class= "BG" style= "Display:none"; ></div>
<div style= "padding-top:20px;" >
<input type= "Submit" name= "value=" Display layer "onclick=" javascript:showdiv () "/>
</div>
</body>
</html>
Attach a good-looking style
The
code is as follows:
<html>
<head><title></title>
<style>
. meswindowtop {
font-size:12px;
Font-weight:bold;
Text-align:left;
}
. meswindowcontent {
font-size:12px;
}
. Meswindow {
Background:none Repeat scroll 0 0 #FFFFFF;
border:1px solid #666666;
}
</style>
</head>
<body>
<div id= "Meswindow class=" Meswindow "style=" top:180px; Position:absolute; width:600px; Margin-left: -300px; left:50%; z-index:9999; " ><div class= "Meswindowtop" ><table width= "100%" height= "100%" ><tbody><tr><td> window title </TD><TD style= "WIDTH:1PX;" ><input type= "button" value= "Close" the "class=" Close "title=" closes the window "onclick=" CloseWindow (); ></td></tr></tbody></table></div><div id= "MesWindowContent" class= " Meswindowcontent "><div style=" padding:20px 0 20px 0;text-align:center "> Message body </div></div>< Div class= "Meswindowbottom" ></div></div>
</body>
</html>
