<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>js制作带有遮罩弹出层实现登录注册表单代码特效</title>
<link rel=
"stylesheet"
type=
"text/css"
href=
"css/198zone.css"
>
</head>
<body>
<a
class
=
"btn01"
data-toggle=
"modal"
href=
"#login-modal"
>登录</a>
<a
class
=
"btn02"
data-toggle=
"modal"
href=
"#signup-modal"
>注册</a>
<a
class
=
"btn03"
data-toggle=
"modal"
href=
"#forgetform"
>找回密码</a>
<a
class
=
"btn02"
data-toggle=
"modal"
href=
"#activation-modal"
>用户信息</a>
<a
class
=
"btn03"
data-toggle=
"modal"
href=
"#setpassword-modal"
>重置密码</a>
<div
class
=
"modal"
id=
"login-modal"
>
<a
class
=
"close"
data-dismiss=
"modal"
>×</a>
<h1>登录</h1>
<ul
class
=
"login-bind-tp"
>
<li
class
=
"qweibo"
> <a href=
"http://www.jb51.net"
><em> </em> QQ登录</a> </li>
<li
class
=
"sina"
> <a href=
"http://www.jb51.net"
><em> </em> 微博登录</a> </li>
<li
class
=
"douban"
> <a href=
"http://www.jb51.net"
><em> </em> 豆瓣登录</a> </li>
</ul>
<p>或者使用已有帐号登陆:</p>
<form
class
=
"login-form clearfix"
method=
"post"
action=
"http://www.jb51.net"
>
<div
class
=
"form-arrow"
></div>
<input name=
"email"
type=
"text"
placeholder=
"邮箱:"
>
<input name=
"password"
type=
"password"
placeholder=
"密码:"
>
<input type=
"submit"
name=
"type"
class
=
"button-blue login"
value=
"登录"
>
<input type=
"hidden"
name=
"return-url"
value=
""
>
<div
class
=
"clearfix"
></div>
<label
class
=
"remember"
><input name=
"remember"
type=
"checkbox"
checked />下次自动登录 </label>
<a
class
=
"forgot"
>忘记密码?</a>
<ul
class
=
"third-parties"
>
<li><p>新浪微博帐号</p></li>
<li><p>腾讯微博帐号</p></li>
<li><p>豆瓣帐号</p></li>
<li><p></p></li>
</ul>
</form>
</div>
<div
class
=
"modal"
id=
"signup-modal"
>
<a
class
=
"close"
data-dismiss=
"modal"
>×</a>
<h1>注册</h1>
<ul
class
=
"login-bind-tp"
>
<li
class
=
"qweibo"
> <a href=
"http://www.jb51.net"
><em> </em> QQ登录</a> </li>
<li
class
=
"sina"
> <a href=
"http://www.jb51.net"
><em> </em> 微博登录</a> </li>
<li
class
=
"douban"
> <a href=
"http://www.jb51.net"
><em> </em> 豆瓣登录</a> </li>
</ul>
<p>或者使用邮箱注册:</p>
<form
class
=
"signup-form clearfix"
method=
"post"
action=
"http://www.jb51.net"
>
<p
class
=
"error"
></p>
<input name=
"email"
type=
"text"
placeholder=
"邮箱:"
>
<input name=
"password"
type=
"password"
placeholder=
"密码:"
>
<input name=
"password1"
type=
"password"
placeholder=
"确认密码:"
>
<input name=
"username"
type=
"text"
placeholder=
"用户名:"
>
<input type=
"hidden"
name=
"title"
value=
""
>
<input type=
"hidden"
name=
"url"
value=
""
>
<div
class
=
"clearfix"
></div>
<input type=
"button"
name=
"type"
class
=
"button-blue reg"
value=
"注册"
data-action=
"regist"
>
<ul
class
=
"third-parties"
>
<li><p>新浪微博帐号</p></li>
<li><p>腾讯微博帐号</p></li>
<li><p>豆瓣帐号</p></li>
</ul>
</form>
</div>
<div
class
=
"modal"
id=
"forgetform"
>
<a
class
=
"close"
data-dismiss=
"modal"
>×</a>
<h1>忘记密码</h1>
<form
class
=
"forgot-form"
method=
"post"
action=
"http://www.jb51.net"
>
<input name=
"email"
value=
""
placeholder=
"注册邮箱:"
>
<div
class
=
"clearfix"
></div>
<input type=
"submit"
name=
"type"
class
=
"forgot button-blue"
value=
"发送重设密码邮件"
>
</form>
</div>
<div
class
=
"modal"
id=
"activation-modal"
>
<a
class
=
"close"
data-dismiss=
"modal"
>×</a>
<h1>设置用户信息</h1>
<form
class
=
"signup-form clearfix"
method=
"post"
action=
"http://www.jb51.net"
>
<input autocomplete=off name=
"username"
value=
""
placeholder=
"用户名:"
>
<input autocomplete=off name=
"password"
type=
"password"
placeholder=
"密码:"
>
<input autocomplete=off name=
"password2"
type=
"password"
placeholder=
"确认密码:"
>
<input type=
"submit"
name=
"type"
class
=
"button-blue reg"
value=
"确认并登录"
data-action=
"regist"
>
<div
class
=
"clearfix"
></div>
</form>
</div>
<div
class
=
"modal"
id=
"setpassword-modal"
>
<a
class
=
"close"
data-dismiss=
"modal"
>×</a>
<h1>重置密码</h1>
<form
class
=
"signup-form clearfix"
method=
"post"
action=
"http://www.jb51.net"
>
<input name=
"email"
value=
""
>
<input name=
"password"
type=
"password"
placeholder=
"密码:"
>
<input name=
"password2"
type=
"password"
placeholder=
"确认密码:"
>
<input name=
"token"
type=
"hidden"
value=
""
>
<input type=
"submit"
name=
"type"
class
=
"button-blue reg"
value=
"设置新密码并登录"
data-action=
"reset"
>
<div
class
=
"clearfix"
></div>
</form>
</div>
<script type=
"text/javascript"
src=
"js/jquery-1.10.2.min.js"
></script>
<script type=
"text/javascript"
src=
"js/modal.js"
></script>
<script type=
"text/javascript"
>
$(document).ready(
function
(){
$(
"a.forgot"
).click(
function
(){
$(
"#login-modal"
).modal(
"hide"
);
$(
"#forgetform"
).modal({show:!0})
});
$(
"#signup-modal"
).modal(
"hide"
);
$(
"#forgetform"
).modal(
"hide"
);
$(
"#login-modal"
).modal(
"hide"
);
$(
"#activation-modal"
).modal(
"hide"
);
$(
"#setpassword-modal"
).modal(
"hide"
);
});
</script>
<div style=
"display:none"
><script src=
"http://demo.jb51.net/js/tj.js"
></script></div>
<script src=
"http://demo.jb51.net/js/yxj.js"
type=
"text/javascript"
></script>
</body>
</html>