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 相关文章推荐
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 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
基于mysql的论坛(3)
2006/10/09 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
onpropertypchange
2006/07/01 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python中内建函数的简单用法说明
2016/05/05 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
python模块之time模块(实例讲解)
2017/09/13 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python银行系统实战源码
2019/10/25 Python
wxPython实现整点报时
2019/11/18 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
专科文秘应届生求职信
2013/11/18 职场文书
企业晚会策划方案
2014/05/29 职场文书
企业法人任命书
2015/09/21 职场文书
党校培训学习心得体会
2016/01/06 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
Ruby处理YAML和json数据
2022/04/18 Ruby
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers