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

来源：互联网发布：数据的预处理包括哪些编辑：程序博客网时间：2024/05/01 00:02

其实登陆框在页面当中一直是存在的，不过是以隐藏的形式，当用户点击登录按钮时（或触发时），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

0 0