在很多页面，都会有提示用户输入账号和密码的弹框。并保障用户的良好体验效果。
| <html> | |
| <head> | |
| <title></title> | |
| <meta http-equiv="content" content="text/html" charset="utf-8"/> | |
| <style type="text/css"> | |
| body{ | |
| background-color: aliceblue; | |
| } | |
| div{ | |
| border: 1px solid black; | |
| 250px; | |
| height: 100px; | |
| display: none; | |
| position: absolute; | |
| top :0px; | |
| left: 0px; | |
| } | |
| form{ | |
| border: 1px solid black; | |
| 250px; | |
| height: 100px; | |
| margin: 200px auto auto auto; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| window.onload=function(){ | |
| var input= document.getElementsByTagName("input")[0]; | |
| input.onclick=function(){ //绑定点击事件 | |
| var div=document.getElementsByTagName("div")[0]; | |
| div.style.display="block"; | |
| div.style.backgroundColor="rgba(0,0,0,0.5)"; //背景色为透明 | |
| div.style.width=innerWidth+"px"; //获得屏幕的宽度 | |
| div.style.height=innerHeight+"px" ; //获得屏幕的高度 | |
| } | |
| var div=document.getElementsByTagName("div")[0]; | |
| div.onclick=function(){ //把DIV获得点击时 | |
| div.style.display="none"; //把DIV设置成禁用 | |
| } | |
| var form=document.getElementsByTagName("form")[0]; | |
| form.onclick=function(ee){ | |
| ee.stopPropagation(); // 阻止冒泡 | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <input type="button" value="注册"/> | |
| <input type="button" value="登陆"/> | |
| <div> | |
| <form action="" method="get"> | |
| <table> | |
| <tr> | |
| <td>用户名：</td> | |
| <td><input type="text"/></td> | |
| </tr> | |
| <tr> | |
| <td>密码：</td> | |
| <td><input type="password"/></td> | |
| </tr> | |
| <tr> | |
| <td colspan="2" ><input type="submit" value="提交"/></td> | |
| </tr> | |
| </table> | |
| </form> | |
| </div> | |
| </body> | |
| </html> |
在做js的时候要给div,table设置绑定事件，并设置用户在点击的时候，是否该隐藏或者显示。并做好相应事件的相应。并对用户输入的结果，进行判断。
面对js代码的时候，我们需要理解其解题思路，只要坚持下去，就会做出想要的结果。