js制作带有遮罩弹出层实现登录注册表单特效代码分享


Posted in Javascript onSeptember 05, 2015

本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码。分享给大家供大家参考。具体如下:

运行效果图:                     ----------------------查看效果   源码下载-----------------------

js制作带有遮罩弹出层实现登录注册表单特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。

jquery制作的带有遮罩弹出层实现登录注册等表单的特效源码,是一段实现了点击后在原始页面上弹出想用页面的代码。
 为大家分享的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="//3water.com"><em> </em> QQ登录</a> </li>
 <li class="sina"> <a href="//3water.com"><em> </em> 微博登录</a> </li>
 <li class="douban"> <a href="//3water.com"><em> </em> 豆瓣登录</a> </li>
 </ul>
 <p>或者使用已有帐号登陆:</p>
 <form class="login-form clearfix" method="post" action="//3water.com">
 <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="//3water.com"><em> </em> QQ登录</a> </li>
 <li class="sina"> <a href="//3water.com"><em> </em> 微博登录</a> </li>
 <li class="douban"> <a href="//3water.com"><em> </em> 豆瓣登录</a> </li>
 </ul>
 <p>或者使用邮箱注册:</p>
 <form class="signup-form clearfix" method="post" action="//3water.com">
 <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="//3water.com">
 <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="//3water.com">
 <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="//3water.com">
 <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>

以上就是为大家分享的js制作带有遮罩弹出层实现登录注册表单代码特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
js控制的遮罩层实例介绍
May 29 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
js逆向解密之网络爬虫
May 30 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 #Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 #Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 #Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 #Javascript
基于JS实现简单的样式切换效果代码
Sep 04 #Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 #Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 #Javascript
You might like
PHP 危险函数全解析
2009/09/09 PHP
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
python实现飞船大战
2020/04/24 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
后勤副校长自我鉴定
2013/10/13 职场文书
影视动画专业个人的自我评价
2013/12/31 职场文书
安全月活动总结
2014/05/05 职场文书
创意婚礼策划方案
2014/05/18 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
小学信息技术教学反思
2016/02/16 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
如何判断pytorch是否支持GPU加速
2021/06/01 Python