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获取作用在元素上面的样式属性代码
Sep 20 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
ant-design-vue按需加载的坑的解决
May 14 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
在项目中寻找代码的坏命名
2012/07/14 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
Python学习小技巧之列表项的排序
2017/05/20 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
Django发送邮件功能实例详解
2019/09/02 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
师范生自荐信
2013/10/27 职场文书
大学军训感言300字
2014/03/09 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
学期个人工作总结
2015/02/13 职场文书
中学生自我评价2015
2015/03/03 职场文书
员工自我工作评价
2015/03/06 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android