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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
js倒计时简单实现代码
Aug 11 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
vue组件与复用详解
Apr 08 Javascript
微信小程序实现文件、图片上传功能
Aug 18 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
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
jQuery 处理表单元素的代码
2010/02/15 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
python查询sqlite数据表的方法
2015/05/08 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
python保留小数位的三种实现方法
2020/01/07 Python
python中提高pip install速度
2020/02/14 Python
python操作redis数据库的三种方法
2020/09/10 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
自我鉴定 电子商务专业
2014/01/30 职场文书
幼儿园美术教学反思
2014/01/31 职场文书
工程负责人任命书
2014/06/06 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书