1. 程式人生 > >彈出半透明黑色遮罩層

彈出半透明黑色遮罩層

<html>
 <head>
 <style>
 a:link{text-decoration:none}
  .black_overlay{
             display: none;
             position: absolute;
             top: 0%;
             left: 0%;
             width: 100%;
             height: 100%;
             background-color: black;
             z-index:1001;
             -moz-opacity: 0.8;
             opacity:.80;
             filter: alpha(opacity=35);
         }
         .white_content {
             display: none;
             position: absolute;
             top: 25%;
             left: 25%;
             width: 55%;
             height: 55%;
             padding: 20px; 
             background-image:url(
http://www.aosae.com/upLoad/Pro/2011428103834687.jpg
);
             z-index:1002;
             overflow: auto;
         }
 </style>
 </head>
 <script language="JavaScript" type="text/JavaScript">
 function index()
 {
 document.getElementById("light").style.display="block";
 document.getElementById("fade").style.display="block";
 }
 function never()
 {
 document.getElementById("light").style.display="none";
 document.getElementById("fade").style.display="none";
 }
 </Script>
 <body>
 <p><a href = "javascript:void(0)"><img src="使用者頭像.jpg" onClick="index()"></a></p>
 <div id="light" class="white_content"><a "href = "javascript:void(0)" onclick="never()">
 <b>關閉圖片</b><a/></div>
 <div id="fade" class="black_overlay"></div>
 </body>

 </html>

歡迎加我的qq技術群425783133