在很多页面,都会有提示用户输入账号和密码的弹框。并保障用户的良好体验效果。
<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; | |
width: 250px; | |
height: 100px; | |
display: none; | |
position: absolute; | |
top :0px; | |
left: 0px; | |
} | |
form{ | |
border: 1px solid black; | |
width: 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代码的时候,我们需要理解其解题思路,只要坚持下去,就会做出想要的结果。
弹框提示用户输入
时间: 2024-10-24 13:03:03