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

Detailed explanation of the application of Docker Swarm in continuous integration testing

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

Detailed explanation of the application of Docker Swarm in continuous integration testing

Example code for implementing auto-increment sequence in mysql

Implementation steps for enabling docker remote service link on cloud centos

Native js implements custom scroll bar component

Detailed explanation of the observer mode starting from the component value transfer of Vue

HTML+CSS+JavaScript to achieve list loop scrolling example code

Solve the scroll-view line break problem of WeChat applet

Input file custom button beautification (demo)

How to use resize to implement image switching preview function

Implementation of grayscale release with Nginx and Lua

Recommend

Summary of four ways to introduce CSS (sharing)

Antd+vue realizes the idea of dynamic verification of circular attribute form

Detailed explanation of several ways to install CMake on Ubuntu

Example of how to quickly delete a 2T table in mysql in Innodb

Detailed steps to modify MySQL stored procedures

MySQL 8.0.20 winx64 installation and configuration method graphic tutorial

Implementation of react routing guard (routing interception)

A brief analysis of the issues that should be paid attention to when making 404 error pages

Hidden overhead of Unix/Linux forks

mysql5.7.19 winx64 decompressed version installation and configuration tutorial

Linux five-step build kernel tree

HTML basic summary recommendation (title)

MySQL InnoDB tablespace encryption example detailed explanation

Docker enables multiple port mapping commands

js to make a simple calculator