HTML pop-up div is very useful to realize mobile centering

Copy code

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">
/*STYLE of the pop-up layer*/
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 this value is half of its width*/
margin-top:-60px!important;/*FF IE7 this value is half of its own height*/
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>

Add a nice style

Copy code

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" class="close" title="Close 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>

<<: 25 div+css programming tips and tricks

>>: MYSQL database basics - Join operation principle

How to implement logic reuse with Vue3 composition API

HTML pop-up div is very useful to realize mobile centering

How to implement logic reuse with Vue3 composition API

15-minute parallel artifact GNU Parallel Getting Started Guide

Example code of html formatting json

MySQL learning database backup detailed explanation

Differences between MySQL MyISAM and InnoDB

Conventional JS processing functions for Vue Element front-end application development

js realizes horizontal and vertical sliders

Implementing license plate input function in WeChat applet

W3C Tutorial (12): W3C Soap Activity

Nginx installation and environment configuration under Windows (running nginx as a service)

Recommend

Docker implements container port binding local port

How to add Lua module to Nginx

JavaScript implements three common web effects (offset, client, scroll series)

The difference between hash mode and history mode in vue-router

Example steps for implementing class selectors and name attribute selectors in js

JavaScript color viewer

HTML (css style specification) must read

Vue commonly used high-order functions and comprehensive examples

mysql IS NULL using index case explanation

Websocket+Vuex implements a real-time chat software

Vue ElementUI implements asynchronous loading tree

How does MySQL achieve master-slave synchronization?

JQuery implements hiding and displaying animation effects

Detailed explanation of memory management of MySQL InnoDB storage engine

Detailed explanation of various usages of proxy_pass in nginx