js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 表单按钮

jquery实现带有遮罩弹出层登录注册表单窗口特效

发布时间:2015-09-02 14:40:26    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery实现带有遮罩弹出层登录注册表单窗口特效
<!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>jquery实现带有遮罩弹出层登录注册表单窗口特效</title>    
<link rel="stylesheet" type="text/css" href="css/style.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.jstxdm.com"><em>&nbsp;</em> QQ登录</a> </li>    
		<li class="sina"> <a href="http://www.jstxdm.com"><em>&nbsp;</em> 微博登录</a> </li>    
		<li class="douban"> <a href="http://www.jstxdm.com"><em>&nbsp;</em> 豆瓣登录</a> </li>    
	</ul>    
	<p>或者使用已有帐号登陆:</p>    
	<form class="login-form clearfix" method="post" action="http://www.jstxdm.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="http://www.jstxdm.com"><em>&nbsp;</em> QQ登录</a> </li>    
		<li class="sina"> <a href="http://www.jstxdm.com"><em>&nbsp;</em> 微博登录</a> </li>    
		<li class="douban"> <a href="http://www.jstxdm.com"><em>&nbsp;</em> 豆瓣登录</a> </li>    
	</ul>    
	<p>或者使用邮箱注册:</p>    
	<form class="signup-form clearfix" method="post" action="http://www.jstxdm.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="http://www.jstxdm.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="http://www.jstxdm.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="http://www.jstxdm.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>



jquery 注册表

jQuery左侧分类导航特效_jquery商城左侧分类菜单导航_橙色导航菜单特效代码

jquery选项卡切换,版块鼠标跟随边框变色特效

jquery带缩略图焦点滚动图特效代码

仿红木之家官网首页jquery焦点全屏大图切换特效

jQuery二级图文平滑下拉菜单特效代码

jquery顶部导航菜单下拉,左侧分类切换特效

jQuery实现固定顶部导航,点触全屏滚动特效代码

jQuery仿腾讯云全屏下拉导航菜单特效代码

一款jQuery跨平台并且带触摸移动端焦点图特效

jQuery四屏焦点图网站特效代码

jquery双重切换的tab选项卡特效代码

jquery仿360音乐搜索主页歌手切换选项卡特效

jquery tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等特效

jquery SuperSlide仿京东首页促销产品tab选项卡切换特效

jquery图片相册特效,切换上下页,还带对话框提醒特效

jquery实现右下角浮动返回顶部并且带微信二维码特效

jquery实现带微信二维码,qq客服,联系电话的返回顶部特效

jQuery右侧浮动客服特效,点击弹出窗口显示更多在线QQ客服

仿OPPO官方商城jquery焦点图特效

jquery绿色的按栏目下拉,信息搜索输入框特效代码

友荐云推荐
大家说 此评论不代表本站观点