jquery原创弹出层折叠效果点击折叠弹出一个�

弹出层效果很多网站上都用到，今天就整理最近项目里用到的一个小效果，点击折叠弹出一个层给用户填写信息。弹出层代码都是日本季刊日本季刊动态创建，每个人写法都不一样，需求也不一样，所有选择符合自已的即可html:复制代码代码如下： h1类=' bm 'a href=' javascript: '我要报名/a/h1复制代码代码如下： * { margin:0划水：0;} body{ font:14px '微软雅黑；color : # 555 } Li { list-style : none；} .layer _ BG { position : fixed top :0 left :0宽度：100%;高度：100%;背景技术： # 000;z索引：10;display:none}。layer _ item {位置：fixed左侧：50%;前：50%；宽度宽度：600像素边距-左侧：-300像素；显示：内联飞越：隐藏；背景# fffz索引：11;} .图层_项目层标题{ float:left宽度：100%;高度：75px线高：75 px飞越：隐藏；background: # FF4E00}。图层_项目layer _ title h1 { float:left字体粗细：正常；font-size :35 px文本-缩进：20像素；color: # fff}。图层_项目图层标题a { float:right宽度：75 px高度：75px线高：65 px文本对齐：居中；font-size :60 pxcolor: # fff文本装饰：无；背景： # 535961;} .layer _ item ul { float:left宽度：100%;padd :10 px 0；} .层项目ul li { float:left宽度：100%;线高：35 pxpadd :10 px 0；飞越：隐藏；} .layer _ item ul Li span {左侧浮动：宽度宽度：100 px ext-缩进：20 px向右文本对齐：填充-右：10 px} .layer _ item ul Li span b { color : ReD；} .层项目ul li .layer _ txt { float:left宽度宽度：300像素宽度：23像素线高：23 pxpadd :5 pxborder 33601 px实心# dfdfdf }。layer _ item ul li #消息{宽度：400像素高度：150 px} .图层_项目layer _ btn { float:left宽度：100%;填充-底部：40 px} .图层_项目。层_btn .layer _ submit _ BTN {左浮动：宽度宽度：100像素高度：40 px文本对齐：居中；飞越：隐藏；背景： # FF4E00color: # fff边距-左侧：110 pxdisplay : inline border : none font :14 px '微软雅黑；线高：40 px} 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我要报名/h1a href=' JavaScript :标题='关闭' x/a/div '；//layer _ title layer=' ul '；//layer_cont layer='lispan真实姓名*:/span put type=' text ' class=' layer _ txt ' name=' name '/Li '；layer='lispan手机*:/span put type=' text ' class=' layer _ txt ' name=' tel '/Li '；layer=' LispanQQ:/span put type=' text ' class=' layer _ txt ' name=' QQ '/Li '；layer='lispan报名人数*:/span put type=' text ' class=' layer _ txt ' name=' num '/Li '；layer='lispan留言：/spantextarea id=' message ' rows=' 2 ' cols=' 20 ' class=' layer _ txt '/textarea/Li；layer='/ul '；//layer _ cont end layer=' div class=' layer _ BTN '输入类型=' submit '类=' layer _ submit _ BTN '值='提交//div '；layer='/div '；//layer_item end $('body ').追加(layer _ BG)；$(“正文”).追加（层);var winW=$(窗口)。宽度();var winH=$(窗口)。高度();var objH=$(' .layer _ item’).高度();var objW=$(' .layer _ item’).宽度();$('.layer _ item’).CSS({ ' height ' : 0 })；$('.BM ').单击(函数(){ $(').层_ BG’).css(“”不透明度',0.7)。fadeIn()；$('.layer _ item’).动画({ 'height': objH，' marginTop': -objH/2 }，500)；});$('.layer _ title a ').on('click '，function () { $(').layer _ item’).动画({ 'height': 0，' marginTop': 0 }，200，function () { $(').层_ BG’).淡出()；});});});效果图