首页 > web前端 > js教程 > 正文

JS与CSS结合 实现DIV显示/隐藏透明层

黄舟
发布: 2016-12-14 15:41:06
原创
1341人浏览过

<style> 
 #massage_box{ position:absolute; left:expression((body.clientwidth-massage_box.offsetwidth)/2); top:expression((body.clientheight-300)/2); width:620px; height:400px;z-index:2; visibility:hidden} #mask{ position:absolute; top:0; left:0; width:expression(body.scrollwidth); height:expression(body.scrollheight); background:#000000; filter:alpha(opacity=65); z-index:1; visibility:hidden; margin:auto} .massage{width:100%; height:100%; color:#036; font-size:12px; line-height:150%}  
 </style>

<script language="javascript"> 
        var obj='' 
        document.onmouseup=mup 
        document.onmousemove=mmove 
        function mdown(object){ 
        obj=object.id 
        document.all(obj).setcapture() 
        px=event.x-document.all(obj).style.pixelleft; 
        py=event.y-document.all(obj).style.pixeltop; 
        } 
         
        function mmove(){ 
        if(obj!=''){ 
          document.all(obj).style.left=event.x-px; 
          document.all(obj).style.top=event.y-py; 
          } 
        } 
         
        function mup(){ 
        if(obj!=''){ 
          document.all(obj).releasecapture(); 
          obj=''; 
          } 
        } 
         
        function sc1(){ 
         document.getelementbyid("massage_box").style.top=document.body.scrolltop+(document.body.clientheight-document.getelementbyid("massage_box").offsetheight)/2 
         document.getelementbyid("massage_box").style.left=document.body.scrollleft+(document.body.clientwidth-document.getelementbyid("massage_box").offsetwidth)/2; 
        } 
        function scall(){ 
         sc1(); 
        } 
        window.onscroll=scall; 
        window.onresize=scall; 
        window.onload=scall; </script>

<body> 
 <div id="massage_box"> 
        <div class="massage"> 
                <table width="200" border="0" align="center"> 
                  <tr> 
                        <td><img src="http://www.phpsoso.com/images/sosobi.gif" style="border:6px solid #ffffff"></td> 
                  </tr> 
                  <tr> 
                        <td height="40" align="center"><span onclick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'" style="cursor:pointer; color:#ffffff">[关闭]</span></td> 
                  </tr> 
                </table> 
        </div> </div> <div id="mask"></div> 
 
 <table width="536" height="264" border="1" align="center"> 
  <tr> 
    <td> </td> 
    <td> </td> 
    <td> </td> 
  </tr> 
  <tr> 
    <td> </td> 
    <td align="center"><span onclick="massage_box.style.visibility='visible'; mask.style.visibility='visible'" style="cursor:pointer;">[打开]</span></td> 
    <td> </td> 
  </tr> 
  <tr> 
    <td> </td> 
    <td> </td> 
    <td> </td> 
  </tr> </table> 
 
 <% for i=1 to 50 '网页加长 
        response.write("</br>") 
next %> 
 </body>

 更多相关文章请关注PHP中文网(www.php.cn)! 

BibiGPT-哔哔终结者
BibiGPT-哔哔终结者

B站视频总结器-一键总结 音视频内容

BibiGPT-哔哔终结者 28
查看详情 BibiGPT-哔哔终结者
相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号