本文为大家介绍了html 弹出p并移动居中，详细的实现代码如下，感兴趣的朋友不要错过
代码如下:
<!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>无标题文档</title>
<style type="text/css">
/*弹出层的style*/
html,body {height:100%; margin:0px; font-size:12px;}
.myp {
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 该值为本身宽的一半 */
margin-top:-60px!important;/*ff ie7 该值为本身高的一半*/
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 showp(){
document.getelementbyid('popp').style.display='block';
document.getelementbyid('bg').style.display='block';
}
function closep(){
document.getelementbyid('popp').style.display='none';
document.getelementbyid('bg').style.display='none';
}
</script>
</head>
<body>
<p id="popp" class="myp" style="display:none;">标题<br/>你懂得<br/>
<a href="javascript:closep()">关闭窗口</a></p>
<p id="bg" class="bg" style="display:none;"></p>
<p style="padding-top: 20px;">
<input type="submit" name="" value="显示层" onclick="javascript:showp()" />
</p>
</body>
</html>
附加一个好看的样式
代码如下:
<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>
<p id="meswindow" class="meswindow" style="top: 180px; position: absolute; width: 600px; margin-left: -300px; left: 50%; z-index: 9999;"><p class="meswindowtop"><table width="100%" height="100%"><tbody><tr><td>窗口标题</td><td style="width:1px;"><input type="button" value="关闭" class="close" title="关闭窗口" onclick="closewindow();"></td></tr></tbody></table></p><p id="meswindowcontent" class="meswindowcontent"><p style="padding:20px 0 20px 0;text-align:center">消息正文</p></p><p class="meswindowbottom"></p></p>
</body>
</html>
更多html弹出div实现移动居中的示例介绍。