JS+CSS实现Div弹出窗口同时背景变暗的方法

最新推荐文章于 2022-12-28 12:41:47 发布

javaPie

最新推荐文章于 2022-12-28 12:41:47 发布

阅读量3k

点赞数

分类专栏： JAVA

JAVA 专栏收录该内容

734 篇文章 5 订阅

订阅专栏

JS+CSS实现Div弹出窗口同时背景变暗的方法

作者：代码家园字体：[ 增加减小] 类型：转载

这篇文章主要介绍了JS+CSS实现Div弹出窗口同时背景变暗的方法,是一款比较典型的javascript操作弹出窗口的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

id="cproIframe_u1892994_2" width="580" height="90" src="http://pos.baidu.com/acom?adn=3&at=231&aurl=&cad=1&ccd=24&cec=GBK&cfv=17&ch=0&col=zh-CN&conBW=0&conOP=1&cpa=1&dai=2&dis=0&ltr=http%3A%2F%2Fwww.jb51.net%2Farticle%2F57630.htm&ltu=http%3A%2F%2Fwww.jb51.net%2Farticle%2F61741.htm&lu_161=0&lunum=6&n=jb51_cpr&pcs=1201x652&pis=10000x10000&ps=514x135&psr=1440x900&pss=1201x515&qn=d5e93fc096d23b99&rad=&rsi0=580&rsi1=90&rsi5=4&rss0=%23FFFFFF&rss1=%23F7FCFF&rss2=%230000ff&rss3=%23444444&rss4=%23008000&rss5=&rss6=%23e10900&rss7=&scale=&skin=tabcloud_skin_3&stid=5&td_id=1892994&titFF=%E5%AE%8B%E4%BD%93&titFS=12&titTA=left&tn=text_default_580_90&tpr=1439264178720&ts=1&version=2.0&xuanting=0&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&di=u1892994&ti=JS%2BCSS%E5%AE%9E%E7%8E%B0Div%E5%BC%B9%E5%87%BA%E7%AA%97%E5%8F%A3%E5%90%8C%E6%97%B6%E8%83%8C%E6%99%AF%E5%8F%98%E6%9A%97%E7%9A%84%E6%96%B9%E6%B3%95_javascript%E6%8A%80%E5%B7%A7_%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6&tt=1439264178705.174.352.353" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true">

本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法。分享给大家供大家参考。具体实现方法如下：

复制代码代码如下:

   <html> 
  
 <head> 
  
 <title>JS+CSS实现的Div弹出窗口，同时背景变暗</title> 
  
 <script>    
  
   function    locking(){    
  
    document.all.ly.style.display="block";    
  
    document.all.ly.style.width=document.body.clientWidth;    
  
    document.all.ly.style.height=document.body.clientHeight;    
  
    document.all.Layer2.style.display='block';   
  
    }    
  
   function    Lock_CheckForm(theForm){    
  
    document.all.ly.style.display='none';document.all.Layer2.style.display='none'; 
  
   return   false;    
  
    }    
  
     </script> 
  
     <style type="text/css"> 
  
 <!-- 
  
 .STYLE1 {font-size: 12px} 
  
 a:link { 
  
 color: #000; 
  
 text-decoration: none; 
  
 } 
  
 a:visited { 
  
 text-decoration: none; 
  
 } 
  
 a:hover { 
  
 text-decoration: none; 
  
 } 
  
 a:active { 
  
 text-decoration: none; 
  
 } 
  
 --> 
  
 </style> 
  
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
  
 </head> 
  
 <body> 
  
     <p align="center"> 
  
         <input type="button" value="弹出DIV" onClick="locking()" /> 
  
     </p> 
  
     <div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; 
  
          z-index: 2; left: 0px; display: none;"> 
  
     </div> 
  
     <!--          浮层框架开始         --> 
  
     <div id="Layer2" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/10); 
  
          background-color: #fff; display: none;" > 
  
         <table width="540" height="300" border="0" cellpadding="0" cellspacing="0" style="border: 0    solid    #e7e3e7; 
  
              border-collapse: collapse ;" > 
  
             <tr> 
  
                 <td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px; 
  
                      font-weight: bold; font-size: 12px;" height="10" valign="middle"> 
  
                      <div align="right"><a href=JavaScript:; class="STYLE1" οnclick="Lock_CheckForm(this);">[关闭]</a>     </div></td> 
  
             </tr> 
  
             <tr> 
  
                 <td height="130" align="center"> 
  
 <br><br><hr><p align="center"><font color=red>本特效收集于互联网，只为兴趣与学习交流，不作商业用途。来源：脚本之家</font></p> 
  
                 </td> 
  
             </tr> 
  
         </table> 
  
     </div> 
  
     <!--  浮层框架结束--> 
  
 </body> 
  
 </html>

javaPie

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS+CSS实现Div弹出窗口同时背景变暗的方法

JS+CSS实现Div弹出窗口同时背景变暗的方法作者：代码家园字体：[增加减小] 类型：转载这篇文章主要介绍了JS+CSS实现Div弹出窗口同时背景变暗的方法,是一款比较典型的javascript操作弹出窗口的技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法。分享给大家供大家参
复制链接

扫一扫

专栏目录