jquery.artwl.thickbox.js A very simple and easy-to-use jQuery popup layer plug-in_jquery

最终效果：

复制代码 代码如下:

弹出层插件jquery.artwl.thickbox.js(http://www.jb51.net)

Artwl

Plug-in principle
The principle of all pop-up layers is similar, that is, a full-screen translucent DIV is used as a mask layer, and then a layer is displayed on this mask layer to contain the content to be displayed, and the rest is CSS. Used.
In order to be simple to use, this plug-in encapsulates JS and CSS in a JS file (plug-in), so it is very convenient to use and can be called in one line of code.
Plug-in source code
The source code of the plug-in (jquery.artwl.thickbox.js) is as follows:

Copy code Code As follows:

/* File Created: March 1, 2012 Author:artwl blog:http://artwl.cnblogs.com */
;(function ($) {
$.extend({
artwl_bind: function (options) {
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 (opacity=50);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 ($ ("#artwl_mask").length == 0) {
$("body").append(mask boxcontain);
$("head").append("");
if(options.title!=""){
$("#artwl_title").html(options.title);
}
if(options.content!=""){
$("#artwl_message").html(options.content);
}
}
$("#" options .showbtnid).click(function () {
var height = $("#artwl_boxcontain").height();
var width = $("#artwl_boxcontain").width();
$ ("#artwl_mask").show();
$("#artwl_boxcontain").css("top", ($(window).height() - height) / 2).css("left", ($(window).width() - width) / 2).show();
if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
width = $(window).width() > 600 ? 600 : $(window).width() - 40;
$("#artwl_boxcontain").css("width", width "px") .css("top", ($(window).height() - height) / 2).css("left", ($(window).width() - width) / 2).show();
$("#artwl_mask").css("width", $(window).width() "px").css("height", $(window).height() "px").css( "background", "#888");
$("#artwl_close").css("top", "30px").css("right", "30px").css("font-size" , "20px").text("Close");
}
});
$("#artwl_close").click(function () {
$("#artwl_mask") .hide();
$("#artwl_boxcontain").hide();
});
},
artwl_close:function(options){
options=$.extend( {
callback:null
},options);
$("#artwl_mask").hide();
$("#artwl_boxcontain").hide();
if( options.callback!=null){
options.callback();
}
}
});
})(jQuery);

call It is also very simple. After introducing this JS file into the page, just call the following code in the page loading method:
$.artwl_bind({ showbtnid: "btn_show", title: "From Cnblogs Artwl", content: $(" #Content").html() });
These three parameters are very simple. The first is the element ID of the pop-up layer that triggers the event, the second is the title of the pop-up layer, and the third is the content of the pop-up layer.
Notes
For the convenience of use, this plug-in writes JS and CSS in one file. If you want to adjust the style of the pop-up layer, you can modify the following CSS.
Plug-in CSS code:

Copy code The code is as follows:

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(opacity= 50);
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

其他浏览器

Demo下载地址：http://xiazai.jb51.net/201203/yuanma/thickbox_demo.rar