jquery原创弹出层折叠功用点击折叠弹出一个层
分类:pc28.am

终极效果: 复制代码 代码如下:

弹出层效果非常多网址上都接受,前天就整合治理多年来项目里用到的三个小成效,点击折叠弹出三个层给顾客填写音信。弹出层代码都以jq动态创制,每种人写法都不相同,要求也不雷同,全数选拔相符自已的即可。 html: 复制代码 代码如下:

弹出层插件:jquery.artwl.thickbox.js

自家要提请

复制代码 代码如下: *{ 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: 复制代码 代码如下: $ { var layer_bg = '

'; //layer_bg var layer = '

'; //layer_item layer = '

弹出层插件jquery.artwl.thickbox.js

Artwl
插件原理 全部弹出层的规律都大约,便是用三个全屏半晶莹剔透DIV做遮罩层,在这里个遮罩层上再呈现出二个层放要浮现的内容,其余的正是CSS的采取了。 本插件为了利用简易,把JS跟CSS封装在了两个JS文件中,所以利用起来非常有益,做到了生机勃勃行代码调用。 插件源代码 插件(jquery.artwl.thickbox.js)的源码如下: 复制代码 代码如下: /* File Created: 三月 1, 2012 Author:artwl blog: */ ; { $.extend({ artwl_bind: function { options=$.extend({ showbtnid:"", title:"", content:"" },options); var mask = '

'; var boxcontain = '

笔者要申请

x

'; //layer_title layer = '

  • 真实性姓名*
  • 手机*
  • QQ:
  • 申请人数*
  • 留言:

'; //layer_cont end layer = '

'; layer = '

'; //layer_item end $.append.append; var winW = $; var winH = $; var objH = $.height(); var objW = $.width.css; $.click { $.css.fadeIn.animate({ 'height': objH, 'marginTop': -objH / 2 },500); }); $.on { $.animate({ 'height': 0, 'marginTop': 0 }, 200, function .fadeOut; 效果图:

Title

Content

'; var cssCode = 'html, body, h1, h2, h3, h4, h5{margin: 0px;padding: 0px;} #artwl_mask{background-color: #000;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0.5;filter: alpha;display: none;} #artwl_boxcontain{margin: 0 auto;position: absolute;z-index: 2;line-height: 28px;display: none;} #artwl_showbox{padding: 10px;background: #FFF;border-radius: 5px;margin: 20px;min-width:300px;min-height:200px;} #artwl_title{position: relative;height: 27px;border-bottom: 1px solid #999;} #artwl_close{position: absolute;cursor: pointer;outline: none;top: 0;right: 0;z-index: 4;width: 42px;height: 42px;overflow: hidden;background-image: url(/Images/feedback-close.png);_background: none;} #artwl_message{padding: 10px 0px;overflow: hidden;line-height: 19px;}'; if .length == 0) { $.append; $.append("

"); if{ $.html; } if{ $.html; } } $("#" options.showbtnid).click { var height = $.height(); var width = $.width.show(); $.css.height.css.width.show(); if ($.browser.msie && $.browser.version.substr { width = $ > 600 ? 600 : $ - 40; $.css("width", width "px").css.height.css.width.show.css.width.css.height.css; $.css.css.css.text; $.click { $; $.hide; }, artwl_close:function{ options=$.extend({ callback:null },options); $; $.hide(); if(options.callback!=null){ options.callback; 调用也极度轻便,在页面引进此JS文件后,在页面加载方法中调用如下代码就可以: $.artwl_bind({ showbtnid: "btn_show", title: "From Cnblogs Artwl", content: $; 那四个参数极其轻松,第二个是弹出层触发事件的要素ID,第一个为弹出层的标题,第多少个为弹出层的内容 注意事项 为了使用方便,本插件把JS跟CSS写在了三个文书中,假诺要调节弹出层的体制能够校勘如下CSS就可以。 插件CSS代码: 复制代码 代码如下: html, body, h1, h2, h3, h4, h5 { margin: 0px; padding: 0px; } #artwl_mask { background - color: #000; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0.5; filter: alpha; display: none; } #artwl_boxcontain { margin: 0 auto; position: absolute; z - index: 2; line - height: 28px; display: none; } #artwl_showbox { padding: 10px; background: #FFF; border - radius: 5px; margin: 20px; min - width: 300px; min - height: 200px; } #artwl_title { position: relative; height: 27px; border - bottom: 1px solid #999; } # artwl_close { position: absolute; cursor: pointer; outline: none; top: 0; right: 0; z

  • index: 4; width: 42px; height: 42px; overflow: hidden; background - image: url(/Images/feedback - close.png); _background: none; } #artwl_message { padding: 10px 0px; overflow: hidden; line - height: 19px; } 此外,针对IE6不援助透明作了分化日常处理,在IE6下显得为:

IE6

其它浏览器

德姆o下载地址:

本文由pc28.am发布于pc28.am,转载请注明出处:jquery原创弹出层折叠功用点击折叠弹出一个层

上一篇:WSUS服务器的装置与利用,WSUS服务器安装配备 下一篇:没有了
猜你喜欢
热门排行
精彩图文