Home >Web Front-end >HTML Tutorial >Detailed explanation of how the size of HTML pop-up transparent layer instances can be set or scaled

Detailed explanation of how the size of HTML pop-up transparent layer instances can be set or scaled

高洛峰
高洛峰Original
2017-03-04 15:33:371252browse

This article mainly introduces the HTML pop-up transparent layer. The size can be set or scaled. Friends who need it can refer to it.

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>LIGHTBOX EXAMPLE</title> 
<style> 
* { 
margin:0; 
padding:0 
} 
html, body { 
height: 100%; 
width: 100%; 
font-size:12px 
} 
.white_content { 
display: none; 
position: absolute; 
top: 25%; 
left: 25%; 
width: 50%; 
padding: 6px 16px; 
border: 12px solid #D6E9F1; 
background-color: white; 
z-index:1002; 
overflow: auto; 
} 
.black_overlay { 
display: none; 
position: absolute; 
top: 0%; 
left: 0%; 
width: 100%; 
height: 100%; 
background-color:#f5f5f5; 
z-index:1001; 
-moz-opacity: 0.8; 
opacity:.80; 
filter: alpha(opacity=80); 
} 
.close { 
float:right; 
clear:both; 
width:100%; 
text-align:right; 
margin:0 0 6px 0 
} 
.close a { 
color:#333; 
text-decoration:none; 
font-size:14px; 
font-weight:700 
} 
.con { 
text-indent:1.5pc; 
line-height:21px 
} 
</style> 
<script> 
function show(tag){ 
var light=document.getElementById(tag); 
var fade=document.getElementById(&#39;fade&#39;); 
light.style.display=&#39;block&#39;; 
fade.style.display=&#39;block&#39;; 
} 
function hide(tag){ 
var light=document.getElementById(tag); 
var fade=document.getElementById(&#39;fade&#39;); 
light.style.display=&#39;none&#39;; 
fade.style.display=&#39;none&#39;; 
} 
</script> 
</head> 
<body> 
<a href="javascript:void(0)" onclick="show(&#39;light&#39;)">打开1</a> 
<a href="javascript:void(0)" onclick="show(&#39;light2&#39;)">打开2</a> 
<p id="light" class="white_content"> 
<p class="close"><a href="javascript:void(0)" onclick="hide(&#39;light&#39;)"> 关闭</a></p> 
<p class="con"> 
内容1 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 
</p> 
</p> 
<p id="light2" class="white_content"> 
<p class="close"><a href="javascript:void(0)" onclick="hide(&#39;light2&#39;)"> 关闭</a></p> 
<p class="con"> 
内容2 
</p> 
</p> 
<p id="fade" class="black_overlay"></p> 
</body> 
</html>


The code is all in Above, you can copy and try...The size of the pop-up layer can be set or scaled

For more examples of HTML pop-up transparent layers, the size can be set or scaled for detailed explanations. Please pay attention to the PHP Chinese website for related articles. !

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn