jquery原创弹出层折叠效果点击折叠弹出一个层


Posted in Javascript onMarch 12, 2014

弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息。弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可。

html:

<h1 class="bm"><a href="javascript:;">我要报名</a></h1>

*{ margin:0; padding:0;} 
body{ font:14px 'Microsoft YaHei'; color:#555;} 
li{ list-style:none;} 
.layer_bg{ position:fixed; top:0; left:0; width:100%; height:100%; background:#000; z-index:10; display:none;} 
.layer_item{ position:fixed; left:50%; top:50%; width:600px; margin-left:-300px; display:inline; overflow:hidden; background:#fff; z-index:11;} 
.layer_item .layer_title{ float:left; width:100%; height:75px; line-height:75px; overflow:hidden; background:#FF4E00;} 
.layer_item .layer_title h1{ float:left; font-weight:normal; font-size:35px; text-indent:20px; color:#fff;} 
.layer_item .layer_title a{ float:right; width:75px; height:75px; line-height:65px; text-align:center; font-size:60px; color:#fff; text-decoration:none; background:#535961;} 
.layer_item ul{ float:left; width:100%; padding:10px 0;} 
.layer_item ul li{ float:left; width:100%; line-height:35px; padding:10px 0; overflow:hidden;} 
.layer_item ul li span{ float:left; width:100px; text-indent:20px; text-align:right; padding-right:10px;} 
.layer_item ul li span b{ color:Red;} 
.layer_item ul li .layer_txt{ float:left; width:300px; height:23px; line-height:23px; padding:5px; border:1px solid #dfdfdf;} 
.layer_item ul li #message{ width:400px; height:150px;} 
.layer_item .layer_btn{ float:left; width:100%; padding-bottom:40px;} 
.layer_item .layer_btn .layer_submit_btn{ float:left; width:100px; height:40px; text-align:center; overflow:hidden; background:#FF4E00; color:#fff; margin-left:110px; display:inline; border:none; font:14px 'Microsoft YaHei'; line-height:40px; }

jq:
$(function () { 
var layer_bg = '<div class="layer_bg"></div>'; //layer_bg 
var layer = '<div class="layer_item">'; //layer_item 
layer += '<div class="layer_title"><h1>我要报名</h1><a href="javascript:;" title="关闭">x</a></div>'; //layer_title 
layer += '<ul>'; //layer_cont 
layer += '<li><span>真实姓名<b>*</b>:</span><input type="text" class="layer_txt" name="name"></li>'; 
layer += '<li><span>手机<b>*</b>:</span><input type="text" class="layer_txt" name="tel"></li>'; 
layer += '<li><span>QQ:</span><input type="text" class="layer_txt" name="qq"></li>'; 
layer += '<li><span>报名人数<b>*</b>:</span><input type="text" class="layer_txt" name="num"></li>'; 
layer += '<li><span>留言:</span><textarea id="message" rows="2" cols="20" class="layer_txt"></textarea></li>'; 
layer += '</ul>'; //layer_cont end 
layer += '<div class="layer_btn"><input type="submit" class="layer_submit_btn" value="提交" /></div>'; 
layer += '</div>'; //layer_item end 
$('body').append(layer_bg); 
$('body').append(layer); 
var winW = $(window).width(); 
var winH = $(window).height(); 
var objH = $('.layer_item').height(); 
var objW = $('.layer_item').width(); 
$('.layer_item').css({ 'height': 0 }); 
$('.bm').click(function () { 
$('.layer_bg').css('opacity',0.7).fadeIn(); 
$('.layer_item').animate({ 'height': objH, 'marginTop': -objH / 2 },500); 
}); 
$('.layer_title a').on('click', function () { 
$('.layer_item').animate({ 'height': 0, 'marginTop': 0 }, 200, function () { 
$('.layer_bg').fadeOut(); 
}); 
}); 
});

效果图:
jquery原创弹出层折叠效果点击折叠弹出一个层 
Javascript 相关文章推荐
JavaScript OOP面向对象介绍
Dec 02 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 #Javascript
jquery、js操作checkbox全选反选
Mar 12 #Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 #Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 #Javascript
判断一个对象是否为jquery对象的方法
Mar 12 #Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 #Javascript
Jquery实现自定义弹窗示例
Mar 12 #Javascript
You might like
我的论坛源代码(六)
2006/10/09 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
js中更短的 Array 类型转换
2011/10/30 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
layui复选框的全选与取消实现方法
2019/09/02 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
Python中operator模块的操作符使用示例总结
2016/06/28 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
在python中bool函数的取值方法
2018/11/01 Python
Python实现的特征提取操作示例
2018/12/03 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
python 实现音频叠加的示例
2020/10/29 Python
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
计算机应用职专应届生求职信
2013/11/12 职场文书
生产现场工艺工程师岗位职责
2013/11/28 职场文书
运动会口号8字
2014/06/07 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
python 管理系统实现mysql交互的示例代码
2021/12/06 Python