jquery reveal弹出层插件鼠标点击文字链接滑动弹出层显示隐藏



148 590 197



特效描述:弹出层插件 文字链接 滑动弹出层 显示隐藏,jquery点击链接文字滑出隐藏图层内容

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.reveal.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* reveal-modal */
.reveal-modal-bg{position:fixed;height:100%;width:100%;background-color:#000;z-index:100;display:none;top:0;left:0;}
.reveal-modal{visibility:hidden;top:100px;left:50%;margin-left:-300px;width:420px;background:#eee url(modal-gloss.png) no-repeat -200px -80px;position:absolute;z-index:101;padding:30px 40px 34px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 0 10px rgba(0,0,0,.4);-webkit-box-shadow:0 0 10px rgba(0,0,0,.4);-box-shadow:0 0 10px rgba(0,0,0,.4);}
.reveal-modal .close-reveal-modal {
font-size:22px;line-height:.5;position:absolute;top:8px;right:11px;color:#aaa;text-shadow:0 -1px 1px rbga(0,0,0,.6);font-weight:bold;cursor:pointer;} 
.reveal-modal h2{font-size:18px;color:#990000;padding:0 0 20px 0;}
.reveal-modal p{padding:0 0 15px 0;}
</style>
<a style="display:block;width:300px;margin:50px auto;text-align:center;font-size:18px;color:#5e5e5e;text-decoration:none;" href="javascript:void(0);" data-reveal-id="myModal">点击弹出-模拟帐户申请</a>	
<div id="myModal" class="reveal-modal">
	<h2>模拟帐户申请</h2>
	<p>用户姓名:<input name="111" type="text" class="input" size="20"></p>
	<p>手机号码:<input name="111" type="text" class="input" size="20"></p>
	<p>身份证号:<input name="111" type="text" class="input" size="35"></p>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="sub" type="button"  value="提交申请"/></p>
	<a class="close-reveal-modal">&#215;</a>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
admin
关注
TA的相关作品 >>更多
热搜关键词


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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