search

Home  >  Article  >  Web Front-end  >  js production with mask pop-up layer to realize login registration form special effects code sharing_jquery

js production with mask pop-up layer to realize login registration form special effects code sharing_jquery

WBOY
WBOYOriginal
2016-05-16 15:40:431290browse

The example in this article describes the production of js with masked pop-up layer to implement login registration form code special effects code. Share it with everyone for your reference. The details are as follows:

Operation renderings:                                                                                                                                                                                                                      ------------------

Tips: If the browser does not work properly, you can try switching the browsing mode.

The special effects source code produced by jquery with a masked pop-up layer to implement forms such as login and registration

is a piece of code that pops up the desired page on the original page after clicking.

The special effects code for creating a login registration form code with a masked pop-up layer for everyone to share with you is as follows



The above is the js production code with mask pop-up layer to realize the login registration form code and special effects code shared with you. I hope you can like it. 
<!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>

</body>
</html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery implements simple multi-line scrolling effect code with up and down control buttons_jqueryNext article：jQuery implements simple multi-line scrolling effect code with up and down control buttons_jquery

Related articles

See more