弹框提示用户输入

时间：2015-05-24 00:00:50 阅读：153 评论：0 收藏：0 [点我收藏+]

标签：

在很多页面，都会有提示用户输入账号和密码的弹框。并保障用户的良好体验效果。

<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代码的时候，我们需要理解其解题思路，只要坚持下去，就会做出想要的结果。

标签：

原文地址：http://www.cnblogs.com/liner730/p/4525098.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行