Un exemple de mise en œuvre du centrage mobile des divs contextuels HTML-tutoriel HTML-php.cn

Un exemple de mise en œuvre du centrage mobile des divs contextuels HTML

高洛峰

Libérer： 2017-03-07 11:08:29

original

1043 Les gens l'ont consulté

Cet article présente le popup html, le déplacement et le centrage. Le code de mise en œuvre détaillé est le suivant. Les amis intéressés ne devraient pas le manquer.

Le code est le suivant :

<!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==&#39;CSS1Compat&#39;) ? 
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==&#39;CSS1Compat&#39;) ? 
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(&#39;popp&#39;).style.display=&#39;block&#39;; 
document.getElementById(&#39;bg&#39;).style.display=&#39;block&#39;; 
} 
function closep(){ 
document.getElementById(&#39;popp&#39;).style.display=&#39;none&#39;; 
document.getElementById(&#39;bg&#39;).style.display=&#39;none&#39;; 
} 
</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>

Copier après la connexion

.
Joignez un code Le beau style

est le suivant :

<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>

Copier après la connexion

Pour plus d'exemples de divs contextuels HTML permettant d'obtenir un centrage mobile, veuillez faire attention sur le site Web PHP chinois pour des articles connexes !