html弹窗半透明

时间：2023-03-10 05:10:40
html弹窗半透明 
 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <title>web设计大本营</title>

 <style type="text/css">

 <!--

 html,body {height:100%; margin:0px; font-size:12px;} 

 .mydiv {

 background-color: #FFCC66;

 border: 1px solid #f00;

 text-align: center;

 line-height: 40px;

 font-size: 12px;

 font-weight: bold;

 z-index:99;

 width: 300px;

 height: 120px;

 left:50%;/*FF IE7*/

 top:50%;/*FF IE7*/ 

 margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */

 margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/ 

 margin-top:0px; 

 position:fixed!important;/*FF IE7*/

 position:absolute;/*IE6*/ 

 _top:       expression(eval(document.compatMode &&

             document.compatMode=='CSS1Compat') ?

             documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/

             document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ 

 }

 .bg {

 background-color: #666;

 width: 100%;

 height: 100%;

 left:0;

 top:0;/*FF IE7*/

 filter:alpha(opacity=50);/*IE*/ /*点击后背景透明效果*/

 opacity:0.5;/*FF*/

 z-index:1; 

 position:fixed!important;/*FF IE7，this line code is extremely important*/

 position:absolute;/*IE6*/ 

 _top:       expression(eval(document.compatMode &&

             document.compatMode=='CSS1Compat') ?

             documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/

             document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ 

 }

 -->

 </style>

 <script language="javascript" type="text/javascript">

 function showDiv(){

 　　document.getElementById('popDiv').style.display='block';

 　　document.getElementById('bg').style.display='block';

 } 

 function closeDiv(){

 　　document.getElementById('popDiv').style.display='none';

 　　document.getElementById('bg').style.display='none';

 } 

 </script>

 </head>

 <body> 

 <div id="popDiv" class="mydiv" style="display:none;">网页设计大本营欢迎你！<br/>Q群号:26868887<br/>

 <a href="javascript:closeDiv()">关闭窗口</a>

 </div> 

 <div id="bg" class="bg" style="display:none;">5555555555</div>

 <div>

    <pre>      春江花月夜

         唐 张若虚 

     春江潮水连海平，海上明月共潮生。 

     滟滟随波千万里，何处春江无月明？

     </pre>

 <p><br /> 

 </p>

 <div style="height:200px; line-height:200px; text-align:center; background:#FFFFCC;"><a href="javascript:showDiv()">点我,弹出层</a></div> 

 </body>

 </html>

相关文章