HTML彈出透明層事例大小可以設定也可以比例化的詳解-html教學-PHP中文網

HTML彈出透明層事例大小可以設定也可以比例化的詳解

高洛峰

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

原創

1208 人瀏覽過

這篇文章主要介紹了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(&#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>

登入後複製

#程式碼全在上面了，可以複製試試...彈出層的大小可以設置，也可以比例化

更多HTML彈出透明層事例大小可以設置也可以比例化的詳解相關文章請關注PHP中文網！