【广东十一选五一定牛】jquery.artwl.thickbox.js 一个

来源:http://www.mnuet.com 作者:论坛中心 人气:79 发布时间:2020-03-22
摘要:最后效果: 复制代码 代码如下: 弹出层插件:jquery.artwl.thickbox.js 弹出层插件jquery.artwl.thickbox.js Artwl 插件原理全体弹出层的原理都大致,就是用叁个全屏半透明DIV做遮罩层,在这里个遮罩

最后效果: 复制代码 代码如下:

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

弹出层插件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 = '

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下载地址:

本文由广东十一选五一定牛发布于论坛中心,转载请注明出处:【广东十一选五一定牛】jquery.artwl.thickbox.js 一个

关键词:

最火资讯