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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
js中键盘事件实例简析
Jan 10 Javascript
Js的Array数组对象详解
Feb 22 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 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
PHP中cookie和session的区别实例分析
2014/08/28 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
ThinkPHP安装和设置
2015/07/27 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
ext实现完整的登录代码
2008/08/08 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
传播学专业毕业生自荐信
2013/11/04 职场文书
《都江堰》教学反思
2014/02/07 职场文书
研发工程师岗位职责
2014/04/28 职场文书
节约用水的口号
2014/06/20 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
刑事法律意见书
2015/06/04 职场文书
关于开学的感想
2015/08/10 职场文书