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 相关文章推荐
jQuery调用WebService的实现代码
Jun 19 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 Javascript
Vue3中toRef与toRefs的区别
Mar 24 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
聊天室php&amp;mysql(五)
2006/10/09 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
python实现旋转和水平翻转的方法
2018/10/25 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Python如何读取、写入CSV数据
2020/07/28 Python
pip install命令安装扩展库整理
2021/03/02 Python
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
机械制造专业毕业生求职信
2014/03/02 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
新手上路标语
2014/06/20 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
Python基础详解之邮件处理
2021/04/28 Python
详解Vue的sync修饰符
2021/05/15 Vue.js
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL