HTML ポップアップの透明レイヤーインスタンスのサイズを設定または拡大縮小する方法の詳細な説明-htmlチュートリアル-php.cn

HTML ポップアップの透明レイヤーインスタンスのサイズを設定または拡大縮小する方法の詳細な説明

高洛峰

リリース： 2017-03-04 15:33:37

オリジナル

1269 人が閲覧しました

この記事では、主にサイズを設定または拡大縮小できる 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 中国語 Web サイトを参照してください。！