收藏本站帮助飘仙建站网侵权投诉

切换到宽版

飘仙建站论坛»论坛 › 源码cms建站学习交流区 › 网页制作设计交流 › 纯CSS和Javascript实现的遮罩层

返回列表发新帖

查看: 1642|回复: 0

[教程] 纯CSS和Javascript实现的遮罩层

发表于 2013-4-10 17:57:33 | 显示全部楼层 |阅读模式来自中国–北京–北京

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>纯CSS和Javascript实现的遮罩层</title>
<style>
      #cover
      {
         background: gray;
         position: absolute;
         left: 0px;
         top: 0px;
         display: none;
         z-index: 20;
         filter: alpha(opacity=60);
         opacity: 0.6 !important;
      }

      #close
      {
         position: absolute;
         display: none;
         z-index: 21 !important;
      }
</style>

<script>
      function show() {
         var cover = document.getElementById("cover");
         var close = document.getElementById("close");
         cover.style.width = document.documentElement.scrollWidth + "px";
         cover.style.height = document.documentElement.scrollHeight + "px";
         cover.style.display = "block";
         close.style.display = "block";
      }
      function hide() {
         var cover = document.getElementById("cover");
         var close = document.getElementById("close");
         cover.style.display = "none";
         close.style.display = "none";
      }
</script>
</head>
<body>
<div id="cover"></div>
<input type="button" name="name" value="显示遮罩层" />
<div id="close">
      <input type="button" name="name" value="隐藏遮罩层" />
</div>
<br />
纯CSS和Javascript实现的遮罩层
      <br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
<br />
纯CSS和Javascript实现的遮罩层
</body>
</html>

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！

回复

使用道具举报

返回列表发新帖

站长推荐 /1

|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-25 03:06 , Processed in 0.044336 second(s), 8 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表