Detaillierte Erläuterung, wie die Größe transparenter HTML-Popup-Ebeneninstanzen festgelegt oder skaliert werden kann

高洛峰
Freigeben: 2017-03-04 15:33:37
Original
1239 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die transparente HTML-Popup-Ebene vorgestellt. Die Größe kann für Freunde in Not wie folgt festgelegt oder skaliert werden:

<!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>
Nach dem Login kopieren
Code Es ist alles oben, Sie können es kopieren und ausprobieren ... Die Größe der Popup-Ebene kann eingestellt oder skaliert werden


Für weitere Beispiele für transparente HTML-Popup-Ebenen kann die Größe festgelegt oder skaliert werden Für detaillierte Erklärungen bitte auf PHP achten.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage