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 相关文章推荐
js调用flash的效果代码
Apr 26 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
js获取域名的方法
Jan 27 Javascript
javascript中scrollTop详解
Apr 13 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
vue 组件销毁并重置的实现
Jan 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
php 执行系统命令的方法
2009/07/07 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
PHP生成UTF8文件的方法
2010/05/15 PHP
php join函数应用
2011/05/04 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
Angularjs单选框相关的示例代码
2017/08/17 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
python实现装饰器、描述符
2018/02/28 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
如何在pycharm中安装第三方包
2020/10/27 Python
枚举与#define宏的区别
2014/04/30 面试题
Java程序员综合测试题
2014/04/25 面试题
计算机应用职专应届生求职信
2013/11/12 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
js 数组 fill() 填充方法
2021/11/02 Javascript