로그인 등록 양식 특수 효과 코드 공유를 실현하기 위한 마스크 팝업 레이어를 사용한 Node.js 제작

로그인 등록 양식 특수 효과 코드 공유를 실현하기 위한 마스크 팝업 레이어를 사용한 Node.js 제작_jquery

WBOY

풀어 주다： 2016-05-16 15:40:43

원래의

1302명이 탐색했습니다.

이 기사의 예에서는 로그인 등록 양식 코드 특수 효과 코드를 구현하기 위해 마스크 팝업 레이어가 있는 js를 생성하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

작업 렌더링: ~ ------

팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.

로그인, 회원가입 등의 폼을 구현하기 위해 마스크된 팝업 레이어를 적용한 jquery로 제작한 특수효과 소스코드

는 클릭하면 원본 페이지에서 원하는 페이지가 팝업되는 코드 조각입니다.

여러분과 공유할 js의 특수 효과 코드는 다음과 같이 로그인 등록 양식을 구현하기 위해 마스크된 팝업 레이어로 만들어졌습니다

위는 여러분과 공유한 로그인 등록 양식 코드와 특수 효과 코드를 구현하기 위한 마스크된 팝업 레이어가 있는 js 제작 코드입니다.

<!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>

로그인 후 복사