Heim > Artikel > Web-Frontend > Ein Beispiel für die Implementierung der mobilen Zentrierung von HTML-Popup-Divs
Ein Beispiel für die Implementierung der mobilen Zentrierung von HTML-Popup-Divs
- 高洛峰Original
- 2017-03-07 11:08:291054Durchsuche
Dieser Artikel stellt HTML-Popup und das Verschieben und Zentrieren vor:
Der Code lautet wie folgt:
<!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>
Fügen Sie einen Code für den gut aussehenden Stil
wie folgt hinzu:
<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>Weitere Beispiele für HTML-Popup-Divs zur Erzielung einer mobilen Zentrierung finden Sie hier Auf der chinesischen PHP-Website finden Sie verwandte Artikel!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ein Beispiel für die Verwendung von href in HTML, um beim Klicken auf einen Link ein Dialogfeld zum Herunterladen einer Datei aufzurufenNächster Artikel：Ein Beispiel für die Verwendung von href in HTML, um beim Klicken auf einen Link ein Dialogfeld zum Herunterladen einer Datei aufzurufen