L'exemple de cet article décrit la production de js avec une couche contextuelle de masque pour implémenter le code d'effets spéciaux du code du formulaire d'inscription de connexion. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Rendu des opérations : ------------------
Le code source des effets spéciaux produit par jquery avec une couche contextuelle masquée pour implémenter des formulaires tels que la connexion et l'inscription
est un morceau de code qui affiche la page souhaitée sur la page d'origine après avoir cliqué.
Le code des effets spéciaux que les js doivent partager avec vous est créé avec une couche contextuelle masquée pour implémenter le formulaire d'inscription de connexion comme suit
<!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>