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也能包含文件
Oct 26 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
3款值得推荐的微信开发开源框架
2014/10/28 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
FCK调用方法..
2006/12/21 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
python django model联合主键的例子
2019/08/06 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
个人找工作求职简历的自我评价
2013/10/20 职场文书
学前班教师的自我鉴定
2013/12/05 职场文书
党日活动总结
2014/05/07 职场文书
消防宣传口号
2014/06/16 职场文书
个人四风对照检查材料
2014/09/26 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
防卫过当辩护词
2015/05/21 职场文书
食堂管理制度范本
2015/08/04 职场文书
用python实现监控视频人数统计
2021/05/21 Python
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript