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

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

Recommend

Rhit efficient visualization Nginx log viewing tool

Table of contents Introduction Install Display Fi...

5 Steps to Implement Responsive Web Design Method and Say Goodbye to Waterfall Model (Graphic Tutorial)

Congratulations on finally convincing your bosses...

Detailed explanation of the process of installing msf on Linux system

Or write down the installation process yourself! ...

Data Structure - Tree (III): Multi-way Search Tree B-tree, B+ tree

Multi-way search tree Height of a complete binary...

HTML form application includes the use of check boxes and radio buttons

Including the use of check boxes and radio buttons...

Solve the problem of docker's tls (ssl) certificate expiration

Problem phenomenon: [root@localhost ~]# docker im...

Hexadecimal color codes (full)

Red and pink, and their hexadecimal codes. #99003...

The whole process of implementing the summary pop-up window with Vue+Element UI

Scenario: An inspection document has n inspection...

How to generate a unique server-id in MySQL

Preface We all know that MySQL uses server-id to ...

How to optimize the slow Like fuzzy query in MySQL

Table of contents 1. Introduction: 2. The first i...

How to set npm to load packages from multiple package sources at the same time

Table of contents 1. Build local storage 2. Creat...

MYSQL implements sample code to prevent duplicate addition when adding shopping cart

Preface Recently, due to work reasons, I was work...

A brief discussion on Python's function knowledge

Table of contents Two major categories of functio...

Example of compiling LNMP in Docker container

Table of contents 1. Project Description 2. Nginx...

MySql 5.7.21 free installation version configuration method under win10

1. Unzip to the location where you want to instal...