Final effect:
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Pop-up Layer plugin:jquery.artwl.thickbox.js</title>
<script src= "/js_lib/jquery-1.7.1.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
/* File Created: March 1, AUTHOR:ARTWL * *
;(function ($) {
$.extend ({
Artwl_bind:function (options) {
Options=$.extend ({
Showbtnid: "",
Title: "",
Content: ""
},options);
var mask = ' <div id= ' artwl_mask ' ></div> ';
var boxcontain = ' <div id= ' Artwl_boxcontain ' >\
<a id= "Artwl_close" href= "javascript:void (0);" title= "Close" ></a>\
<div id= "Artwl_showbox" >\
<div id= "Artwl_title" >\
Title</div>\
<div id= "Artwl_message" >\
CONTENT<BR/>\
</div>\
</div>\
</div> ';
var csscode = ' html, body, H1, H2, H3, H4, h5{margin:0px;padding:0px;} \
#artwl_mask {background-color: #000;p osition:absolute;top:0px;left:0px;width:100%;height:100%;opacity:0.5;filter : Alpha (OPACITY=50);d Isplay: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;o Verflow:hidden;background-image:url (/upload/201203/20120301220903376.png); _background:none;} \
#artwl_message {padding:10px 0px;overflow:hidden;line-height:19px;} ';
if ($ ("#artwl_mask"). Length = = 0) {
$ ("Body"). Append (mask + boxcontain);
$ ("Head"). Append ("<style type= ' text/css ' >" + csscode + "</style>");
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? $: $ (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);
$ (function () {
$.artwl_bind ({showbtnid: "Btn_show", Title: "From Cnblogs artwl", Content: $ ("#Content"). html ()});
});
function Test () {
Alert ("before Close");
$.artwl_close ({callback:other});
}
function Other () {
Alert ("after Close");
}
</script>
<body>
<input type= "button" value= "click Me" id= "Btn_show"/>
<span id= "Content" style= "Display:none;" >
<a href= "http://www.jb51.net" >artwl</a><br/>
<input type= "button" onclick= "Test ()" value= "test"/>
</span>
</body>
Plug-in principle
All the pop-up layer principle is similar, is to use a full screen translucent div to do mask layer, in this mask layer again show a layer to display the content, the other is the use of CSS.
The plug-in in order to use a simple, JS and CSS encapsulated in a JS file (plug-in), so very convenient to use, do a line of code calls.
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, author:artwl blog:http://artwl.cnblogs.com * *
;(function ($) {
$.extend ({
Artwl_bind:function (options) {
Options=$.extend ({
Showbtnid: "",
Title: "",
Content: ""
},options);
var mask = ' <div id= ' artwl_mask ' ></div> ';
var boxcontain = ' <div id= ' Artwl_boxcontain ' >\
<a id= "Artwl_close" href= "javascript:void (0);" title= "Close" ></a>\
<div id= "Artwl_showbox" >\
<div id= "Artwl_title" >\
Title</div>\
<div id= "Artwl_message" >\
CONTENT<BR/>\
</div>\
</div>\
</div> ';
var csscode = ' html, body, H1, H2, H3, H4, h5{margin:0px;padding:0px;} \
#artwl_mask {background-color: #000;p osition:absolute;top:0px;left:0px;width:100%;height:100%;opacity:0.5;filter : Alpha (OPACITY=50);d Isplay: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;o Verflow: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 ("<style type= ' text/css ' >" + csscode + "</style>");
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? $: $ (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);
The call is also very simple, after the page introduces this JS file, in the page load method call the following code:
$.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 triggering event, the second is the title of the pop-up layer, and the third is the content of the pop-up layer.
Attention matters
In order to use convenient, the plug-in JS and CSS written in a file, if you want to adjust the pop-up layer style can be modified as follows CSS.
Plugin CSS Code:
Copy Code code 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;
}
In addition, special processing for IE6 is not supported for transparency, shown under IE6 as:
IE6
Other browsers
Demo Download Address: Http://xiazai.jb51.net/201203/yuanma/thickbox_demo.rar
