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 Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
JS中字符串trim()使用示例
May 26 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
关于vue-resource报错450的解决方案
Jul 24 Javascript
js微信分享实现代码
Oct 11 Javascript
JavaScript实现的拼图算法分析
Feb 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
python简单分割文件的方法
2015/07/30 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
Python实现仿射密码的思路详解
2020/04/23 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
无工作经验者个人求职信范文
2013/12/22 职场文书
办理信用卡工作证明
2014/09/30 职场文书
职工年度考核评语
2014/12/31 职场文书
英语辞职信怎么写
2015/02/28 职场文书
无房证明样本
2015/06/17 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL