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实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
杏林同学录(一)
2006/10/09 PHP
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
php 中文和编码判断代码
2010/05/16 PHP
PHP关联链接常用代码
2012/11/05 PHP
php实现递归的三种基本方式
2020/07/04 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
Javascript事件实例详解
2013/11/06 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
Python写的服务监控程序实例
2015/01/31 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
幼师专业毕业生自荐信
2013/09/29 职场文书
科室工作的个人自我评价
2013/10/30 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
防汛通知
2015/04/25 职场文书
毕业设计论文致谢词
2015/05/14 职场文书