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

湛蓝之海

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="https://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)" >打开1</a> 
<a href="javascript：void(0)" >打开2</a> 
<div id="light" class="white_content"> 
<div class="close"><a href="javascript：void(0)" > 关闭</a></div> 
<div class="con"> 
内容1 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 
</div> 
</div> 
<div id="light2" class="white_content"> 
<div class="close"><a href="javascript：void(0)" > 关闭</a></div> 
<div class="con"> 
内容2 
</div> 
</div> 
<div id="fade" class="black_overlay"></div> 
</body> 
</html>

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

[Html/CSS] HTML弹出透明层事例大小可以设置也可以比例化

相关帖子

文件对比工具/Beyond Compare

常用HTML网页跳转的几种方法

CSS3荧光灯文字闪烁动画特效

php实现超简的分页功能

PHP版贪吃蛇小游戏

Win便捷工具常用设置软件

视频压缩软件_VideoMinimizer

利用html+js触发弹窗事件

利用HTML、CSS和JS制作随机密码生成器

css3怎样设置子元素居中的方法

湛蓝之海 LV3