jquery modal dialog对话框窗口插件制作遮罩弹出层登录注册表单代码



235 936 313



特效描述:对话框窗口插件 遮罩弹出层 登录注册表单,

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/modal.js"></script>

3. HTML代码

<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.17sucai.com"><em>&nbsp;</em> QQ登录</a> </li>
		<li class="sina"> <a href="http://www.17sucai.com"><em>&nbsp;</em> 微博登录</a> </li>
		<li class="douban"> <a href="http://www.17sucai.com"><em>&nbsp;</em> 豆瓣登录</a> </li>
	</ul>
	<p>或者使用已有帐号登陆:</p>
	<form class="login-form clearfix" method="post" action="http://www.17sucai.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.17sucai.com"><em>&nbsp;</em> QQ登录</a> </li>
		<li class="sina"> <a href="http://www.17sucai.com"><em>&nbsp;</em> 微博登录</a> </li>
		<li class="douban"> <a href="http://www.17sucai.com"><em>&nbsp;</em> 豆瓣登录</a> </li>
	</ul>
	<p>或者使用邮箱注册:</p>
	<form class="signup-form clearfix" method="post" action="http://www.17sucai.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.17sucai.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.17sucai.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.17sucai.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">
$(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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 图片头像上传 文字提示框 文件上传 提示框/弹出层 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到