一个非常简单易用的jQuery弹出层插件

最终效果：复制代码代码如下：DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title弹出层插件：jquery.artwl.thickbox.js/title脚本src=' http :/js _ lib/jQuery-1。7 .1 .js ' type=' text/JavaScript '/脚本脚本类型=' text/JavaScript '/*文件创建：三月1、2012作者： ARtl */；（函数($) { $。extend({ arttil _ bind :函数(选项){ options=$).extend({ showbtnid: ' '，title: ' '，content:'' }，options)；var mask=' div id=' arttil _ mask '/div '；var box contain=' div id=' arttil _ box contain ' \ a id=' arttil _ close ' href=' JavaScript : void(0)；Title=' Close '/a \ div id=' artil _ show box ' \ div id=' artil _ Title ' \ H2 \ Title/H2 \/div \ div id=' artil _ message ' \ content br/\/div \/div '；var cssCode='html，body，h1，h2，h3，h4，H5 { margin : 0pxpadding : 0px } \ # arttil _ mask { background-color : # 000；绝对位置：top: 0pxleft: 0px宽度： 100%;高度： 100%;opa city 3360 0.5 filter : alpha(不透明度=50);显示器：无；} \ # arttil _ box包含{ margin : 0 auto绝对位置：z-index : 2；线高： 28px显示器：无；} \ # arttil _ show box { padd : 10px；背景： # FFF；边界半径： 5px余量： 20px最小宽度宽度：300像素最小高度：200 px} \ # arttil _ title {位置：相对；高度： 27px边框-底部： 1px实心# 999;} \ # arttil _ close { position : absolute；光标：指针；大纲：无；top : 0；右： 0；z-index : 4；宽度： 42px高度： 42px飞越：隐藏；后台-image : URL(/upload/201203/20120301220903376。巴布亚新几内亚)；_background:无；} \ # arttil _ message { padd : 10px 0px；飞越：隐藏；线高： 19px}';if($(' # arttil _ mask ').长度==0) { $('body ').追加（掩码箱式容器)；$(“头”).追加(' style type=' text/CSS ' ' CSS代码'/style ')；if(options.title！=' '){ $(' # arttil _ title ').html(选项。标题)；} if(options.content！=' '){ $(' # arttil _ message ').html(选项。内容)；} } $(“#”选项。showbtnid ).单击(function(){ var height=$(' # arttill _ box contain ').高度();var width=$(' # arttill _ box container ').宽度();$(' # arttil _ mask ').show()；$(' # arttil _ box contain ').css('top '，($(window)).高度()-高度)/2)。css('左'，($(窗口)).width() - width)/2).show()；if($。浏览器。msie $。浏览器。版本。substr(0，1) 7) { width=$(window).宽度()600?600 :美元（窗口)。宽度()-40;$(' # arttil _ box contain ').css('width '，width 'px ').css('top '，($(window)).高度()-高度)/2)。css('左'，($(窗口)).width() - width)/2).show()；$(' # arttil _ mask ').css('width '，$(window).width() 'px ').css('height '，$(window).高度()" px ").css(“”背景',' # 888 ');$(' # arttil _ close ').css('top '，' 30px ').css(“”右，' 30px ').css('字号'，' 20px ').文本('关闭');} });$(' # arttil _ close ').单击(function(){ $(' # arttil _ mask ')).hide()；$(' # arttil _ box contain ').hide()；});}，artil _ close :函数(选项){ options=$ .extend({ callback:null }，options)；$(' # arttil _ mask ').hide()；$(' # arttil _ box contain ').hide()；if(options.callback！=null){ options。回调()；} } });})(jQuery)；$(function () { $).artfll _ bind({ show btnid : ' BTN _ show '，title: ' From Cnblogs Artwl '，content: $('#Content ').html()})；});功能测试(){警报('关闭前');$.artfll _ close({ callback : other })；}函数other(){ alert('关闭后')；}/脚本/头体h3弹出层插件jquery。阿蒂尔。厚盒子。js(www/JB 51。净)/H3输入类型='按钮'值='单击我' id=' BTN _显示'/span id='内容'样式='显示：无；a href='//www .JB 51。net ' Artil/ABR/input type=' button ' onclick=' Test()' value=' Test '/span/body/html插件原理所有弹出层的原理都差不多，就是用一个全屏半透明差异做遮罩层，在这个遮罩层上再显示出一个层放要显示的内容，其他的就是半铸钢钢性铸铁(铸造半钢)的运用了。本插件为了使用简单，把射流研究…跟半铸钢钢性铸铁(铸造半钢)封装在了一个射流研究…文件（插件)中，所以使用起来非常方便，做到了一行代码调用。

插件源代码插件(jquery。阿蒂尔。厚盒子。js)的源码如下：复制代码代码如下： /*文件创建：三月1、2012年作者：艺术品blog:http://artwl.cnblogs.com */；（函数($) { $。extend({ arttil _ bind :函数(选项){ options=$).extend({ showbtnid: ' '，title: ' '，content:'' }，options)；var mask=' div id=' arttil _ mask '/div '；var box contain=' div id=' arttil _ box contain ' \ a id=' arttil _ close ' href=' JavaScript : void(0)；Title=' Close '/a \ div id=' artil _ show box ' \ div id=' artil _ Title ' \ H2 \ Title/H2 \/div \ div id=' artil _ message ' \ content br/\/div \/div '；var cssCode='html，body，h1，h2，h3，h4，H5 { margin : 0pxpadding : 0px } \ # arttil _ mask { background-color : # 000；绝对位置：top: 0pxleft: 0px宽度： 100%;高度： 100%;opa city 3360 0.5 filter : alpha(不透明度=50);显示器：无；} \ # arttil _ box包含{ margin : 0 auto绝对位置：z-index : 2；线高： 28px显示器：无；} \ # arttil _ show box { padd : 10px；背景： # FFF；边界半径： 5px余量： 20px最小宽度宽度：300像素最小高度：200 px} \ # arttil _ title {位置：相对；高度： 27px边框-底部： 1px实心# 999;} \ # arttil _ close { position : absolute；光标：指针；大纲：无；top : 0；右： 0；z-index : 4；宽度： 42px高度： 42px飞越：隐藏；背景-图像：网址(/图像/反馈-关闭。巴布亚新几内亚)；_background:无；} \ # arttil _ message { padd : 10px 0px；飞越：隐藏；线高： 19px}';if($(' # arttil _ mask ').长度==0) { $('body ').追加（掩码箱式容器)；$(“头”).追加(' style type=' text/CSS ' ' CSS代码'/style ')；if(options.title！=' '){ $(' # arttil _ title ').html(选项。标题)；} if(options.content！=' '){ $(' # arttil _ message ').html(选项。内容)；} } $(“#”选项。showbtnid ).单击(function(){ var height=$(' # arttill _ box contain ').高度();var width=$(' # arttill _ box container ').宽度();$(' # arttil _ mask ').show()；$(' # arttil _ box contain ').css('top '，($(window)).高度()-高度)/2)。css('左'，($(窗口)).width() - width)/2).show()；if($。浏览器。msie $。浏览器。版本。substr(0，1) 7) { width=$(window).宽度()600?600 :美元（窗口)。宽度()-40;$(' # arttil _ box contain ').css('width '，width 'px ').css('top '，($(window)).高度()-高度)/2)。css('左'，($(窗口)).width() - width)/2).show()；$(' # arttil _ mask ').css('width '，$(window).width() 'px ').css('height '，$(window).高度()" px ").css(“”背景',' # 888 ');$(' # arttil _ close ').css('top '，' 30px ').css(“”右，' 30px ').css('字号'，' 20px ').文本('关闭');} });$(' # arttil _ close ').单击(function(){ $(' # arttil _ mask ')).hide()；$(' # arttil _ box contain ').hide()；});}，artil _ close :函数(选项){ options=$ .extend({ callback:null }，options)；$(' # arttil _ mask ').hide()；$(' # arttil _ box contain ').hide()；if(options.callback！=null){ options。回调()；} } });})(jQuery)；调用也非常简单，在页面引入此射流研究…文件后，在页面加载方法中调用如下代码即可： $.artfll _ bind({ show btnid : ' BTN _ show '，title: ' From Cnblogs Artwl '，content: $('#Content ').html()})；这三个参数非常简单，第一个是弹出层触发事件的元素身份证，第二个为弹出层的标题，第三个为弹出层的内容注意事项为了使用方便，本插件把射流研究…跟半铸钢钢性铸铁(铸造半钢)写在了一个文件中，如果要调整弹出层的样式可以修改如下半铸钢钢性铸铁(铸造半钢)即可。

插件半铸钢钢性铸铁(铸造半钢)代码：复制代码代码如下： html，body，h1，h2，h3，h4，H5 { margin : 0pxpadding : 0px } # arttil _ mask { background-color : # 000；绝对位置：top: 0pxleft: 0px宽度： 100%;高度： 100%;opa city 3360 0.5 filter : alpha(不透明度=50);显示器：无；} # arttil _ box包含{ margin : 0 auto绝对位置：z-index : 2；线高： 28px显示器：无；} # arttil _ show box { padd : 10px；背景： # FFF；边界半径： 5px余量： 20px最小宽度： 300像素；最小高度： 200像素；} # arttil _ title {位置：相对；高度： 27px边框-底部： 1px实心# 999;} # arttil _ close { position : absolute；光标：指针；大纲：无；top : 0；右： 0；z-index : 4；宽度： 42px高度： 42px飞越：隐藏；背景-图像：网址(/图像/反馈-关闭。巴布亚新几内亚)；_background:无；} # arttil _ message { padd : 10px 0px；飞越：隐藏；线高： 19px} 另外，针对IE6不支持透明作了特殊处理，在IE6下显示为

IE6

其他浏览器演示下载地址：http://小哉。JB 51。net/201203/马援/thickbox_demo.rar