php网站制作(5)-类似于百度优酷等一样弹出的登陆框

最新推荐文章于 2020-02-28 10:58:27 发布

Rascal_Wei

最新推荐文章于 2020-02-28 10:58:27 发布

阅读量767

点赞数

分类专栏：网站制作-php、html、js、ajax

本文链接：https://blog.csdn.net/weishuxiao1/article/details/28594071

版权

网站制作-php、html、js、ajax 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

其实登陆框在页面当中一直是存在的，不过是以隐藏的形式，当用户点击登录按钮时（或触发时），js会修改css布局，使其展现。

下面为实现登录界面的相关代码，由于时间关系，js css html写到一起了，有时间在分开：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>用户注册</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery-1.11.1.min.js"></script>

<script>
	$(document).ready(function() {
		$("#button1").click(function() {
			$("#login-page1").css({
				"visibility" : "visible",
				"display" : "block",
				"position" : "absolute",
				"top" : "100px"
			});
		});
		$("#login-exit-icon").click(function() {
			$("#login-page1").css({
				"visibility" : "hiden",
				"display" : "none"
			});
		});
	});
</script>
</head>

<body>
	<button id="button1" type="button">弹出loginbox</button>

	<div class="login-page" id="login-page1">
		<!-- 整个页面背景 -->
		<div id="login-back-color"
			style="top: 0px; left: 0px; position: fixed; width: 1360px; height: 610px; opacity: 0.1; z-index: 1000; background-color: rgb(0, 0, 0);">
		</div>


		<div id="register-user-box" class="register-user-box"
			style="position: absolute; width: 400px; height: 440px; left: 483px; top: 40px; z-index: 2000; background-color: #ffffff; border: 5px solid #ddd;">

			<div class="login-box-head" id="login-box-head"
				style="background-color: #f7f7f7; height: 35px; border: 1px solid #ddd; border-bottom: 0;">
				<!-- 叉号退出 -->
				<div class="login-exit-box" id="login-exit-box"
					style="width: 16px; height: 20px; width: 20px; position: absolute; right: 0px; top: 0px;">
					<a id="login-exit-icon" class="login-exit-icon"
						style="height: 20px; display: block; background-image: url('login-exit-icon.png'); background-repeat: no-repeat;"></a>
				</div>

				<span class="login-box-title" id="login-box-title"
					style="font-weight: bold; color: #666; padding: 10px 0 13px; margin-left: 29px; display: block;">用户注册</span>
			</div>

			<form id="info_box" class="info_box" method="POST" autocomplete="off">
				<!-- 提示登录错误 -->
				<div id="login-error-line" class="login-error-line"
					style="height: 15px; line-height: 30px; font-size: 15px; color: #fc4343; margin-left: 50px;">
					用户名或密码错误！</div>

				<div id="login-box" class="login-box"
					style="margin-top: 25px; margin-left: 30px;">
					<p id="login-count" class="login-count-pw">
						<input type="text" name="userName" placeholder="邮箱/手机号"
							style="height: 35px; width: 320px; font-size: 16px;">
					</p>
					<p id="login-count" class="login-count-pw">
						<input type="text" name="userName" placeholder="用户名"
							style="height: 35px; width: 320px; font-size: 16px;">
					</p>
					<p id="login-pw" class="login-count-pw">
						<input type="password" name="password" placeholder="6-16位密码"
							style="height: 35px; width: 320px; font-size: 16px;">
					</p>
					<div id="login-error-line" class="login-error-line"
					style="height: 10px; line-height: 18px; font-size: 15px; color: #fc4343;">
					两次输入密码不一致</div>
					<p id="login-pw" class="login-count-pw">
						<input type="password" name="password" placeholder="确认密码"
							style="height: 35px; width: 320px; font-size: 16px;">
					</p>
					
					<p>
						<a class="login-submit-link" href="http://www.baidu.com"
							target="_blank"
							style=" bottom: 20px; right: 60px; font-size: 13px;">阅读用户须知</a>
					</p>

					<p>
						<input id="login-submit" type="submit" value="同意并注册"
							class="login-submit"
							style="height: 35px; width: 330px; background-color: #014ccc; font-size: 20px; color: #fff">
					</p>

					<p>
						<a class="login-submit-link" href="http://www.baidu.com"
							target="_blank"
							style="position: absolute; bottom: 20px; right: 60px; font-size: 13px;">已有账号登录</a>
					</p>
				</div>
			</form>
		</div>
	</div>
</body>
</html>

注意：z-index只在指定position的标签下有效，参考：http://www.cnblogs.com/gisdream/archive/2010/06/10/1755891.html