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利用ajax调用后台方法实例
Aug 23 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
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中GET变量的使用
2006/10/09 PHP
smarty实例教程
2006/11/19 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
python类中super() 的使用解析
2019/12/19 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
口头翻译求职人自荐信
2013/12/07 职场文书
教师职称自我鉴定
2014/02/12 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫