Home > Article > Web Front-end > js实现登陆遮罩效果的方法_javascript技巧
js实现登陆遮罩效果的方法_javascript技巧

WBOYOriginal: 2016-05-16 15:48:281169browse
本文实例讲述了js实现登陆遮罩效果的方法。分享给大家供大家参考。具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>遮罩</title>
<style>
 #blanks{
  display:none;
  width:100%;
  //height:100%;
  height:100px;
  position:absolute;
  top:0;
  background-color:#ccc;
  z-index:1000;
  -moz-opacity: 0.7; 
  opacity:.70; 
  filter: alpha(opacity=70);
 }
 #login{
  padding:18px;
  display:none;
  background-color:pink;
  width:300px;
  height:100px;
  position:absolute;
  left:400px;
  top:20%;
  z-index:1001;
 }
</style>
</head>
<body onload="setHeight()">
  <div id="content">
   <input type="button" value="登陆" onclick="showLogin()">
   <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
   作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
   像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
   这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
   如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
   </p>
   <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
   作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
   像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
   这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
   如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
   </p>
   <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
   作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
   像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
   这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
   如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
   </p>
   <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
   作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
   像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
   这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
   如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
   </p>
   <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
   作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
   像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
   这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
   如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
   </p>
   <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
   作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
   像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
   这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
   如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
   </p>
   <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
   作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
   像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
   这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
   如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
   </p>
   <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
   作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
   像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
   这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
   如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
   </p>
   <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
   作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
   像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
   这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
   如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
   </p>
   <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
   作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
   像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
   这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
   如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
   </p>
   <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
   作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
   像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
   这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
   如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
   </p>
   <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
   作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
   像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
   这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
   如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
   </p>
   <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
   作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
   像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
   这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
   如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
   </p>
  </div>
  <div id="blanks"></div>
  <div id="login">
   <form method="post">
    用户名：<input type="text" name="username" ><br/>
    密  码：<input type="password" name="password"><br/>
     <input type="submit" value="提交">
   </form>
    <div id="btnclose" style="position:absolute;left:93%;top:0%;z-index:5;">
     <img  src="close.png" onclick="hidediv();"/ alt="js实现登陆遮罩效果的方法_javascript技巧" >
    </div>
  </div>
</body>
</html>
<script type="text/javascript">
 function setHeight()
 {
  var h=document.documentElement.scrollHeight;
  document.getElementById("blanks").style.height=h+"px";
 }
 function hidediv()
 {
  document.getElementById("login").style.display="none";
  document.getElementById("blanks").style.display="none";
 }
 function showLogin()
 {
  document.getElementById("login").style.display="block";
  document.getElementById("blanks").style.display="block";
 }
</script>
希望本文所述对大家的javascript程序设计有所帮助。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：学习Bootstrap组件之下拉菜单_javascript技巧Next article：怎么通过onclick事件获取js函数返回值（代码少）_基础知识
See more
js实现登陆遮罩效果的方法_javascript技巧

Related articles
