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 相关文章推荐
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 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中对数据库操作的封装
2006/10/09 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
Python机器学习之决策树算法实例详解
2017/12/06 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
Python实现全排列的打印
2018/08/18 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
应届生护士求职信
2013/11/01 职场文书
爱心捐书倡议书
2015/04/27 职场文书
终止合同协议书范本
2016/03/22 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
分析Python list操作为什么会错误
2021/11/17 Python