HTML弹出透明层事例大小可以设置也可以比例化的详解-html教程-PHP中文网

HTML弹出透明层事例大小可以设置也可以比例化的详解

高洛峰

发布： 2017-03-04 15:33:37

原创

1761人浏览过

这篇文章主要介绍了html弹出透明层，大小可以设置也可以比例化，需要的朋友可以参考下

代码如下:

<!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('fade'); 
light.style.display='block'; 
fade.style.display='block'; 
} 
function hide(tag){ 
var light=document.getElementById(tag); 
var fade=document.getElementById('fade'); 
light.style.display='none'; 
fade.style.display='none'; 
} 
</script> 
</head> 
<body> 
<a href="javascript:void(0)" onclick="show('light')">打开1</a> 
<a href="javascript:void(0)" onclick="show('light2')">打开2</a> 
<p id="light" class="white_content"> 
<p class="close"><a href="javascript:void(0)" onclick="hide('light')"> 关闭</a></p> 
<p class="con"> 
内容1 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 
</p> 
</p> 
<p id="light2" class="white_content"> 
<p class="close"><a href="javascript:void(0)" onclick="hide('light2')"> 关闭</a></p> 
<p class="con"> 
内容2 
</p> 
</p> 
<p id="fade" class="black_overlay"></p> 
</body> 
</html>

登录后复制

代码全在上面了，可以复制试试...弹出层的大小可以设置，也可以比例化