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中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
vue组件入门知识全梳理
Sep 21 Javascript
详解vue中v-for的key唯一性
May 15 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
从php核心代码分析require和include的区别
2011/01/02 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python 二维数组90度旋转的方法
2019/01/28 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
详解python中各种文件打开模式
2020/01/19 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
装修协议书范本
2014/04/21 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书