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 操作css实现代码
Jun 11 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
如何用threejs实现实时多边形折射
May 07 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中Date获取时间不正确怎么办
2008/06/05 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
php批量删除操作代码分享
2017/02/26 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
CSS常用网站布局实例
2008/04/03 Javascript
学习ExtJS border布局
2009/10/08 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
幼儿如何来做好自我评价
2013/11/05 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
教师读书活动总结
2014/05/07 职场文书
绿色环保标语
2014/06/12 职场文书
大学专科求职信
2014/07/02 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
保姆聘用合同
2015/09/21 职场文书
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫