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读取RSS数据
Jan 20 Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
Vue详细的入门笔记
May 10 Vue.js
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
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
jquery cookie插件代码类
2009/05/26 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
Python实现提取文章摘要的方法
2015/04/21 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
python实现字符串和字典的转换
2018/09/29 Python
Django保护敏感信息的方法示例
2019/05/09 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
校园报刊亭创业计划书
2014/01/02 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
女性励志书籍推荐
2019/08/19 职场文书