Final effect:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> pop-up layer plug-in: 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, 2012 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"> \
<H2> \
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; 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 (/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" pai.html (options. title );
}
If (options. content! = ""){
$ ("# Artwl_message" 2.16.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)/22.16.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)/22.16.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>
</Head>
<Body>
<H3> pop-up layer plug-in jquery. artwl. thickbox. js (http://www.jb51.net) <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>
</Html>
Plugin Principle
The principle of all pop-up layers is similar, that is, a fully-screen translucent DIV is used as the mask layer, and the content to be displayed on this mask layer is displayed, others are the use of CSS.
This plug-in encapsulates JS and CSS in a JS file (plug-in) For ease of use, so it is very convenient to use and can be called with a line of code.
Plug-in source code
The source code of the plug-in (jquery. artwl. thickbox. js) is as follows:
Copy codeThe Code is 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 = '<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"> \
<H2> \
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; 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 ("<style type = 'text/css '>" + cssCode + "</style> ");
If (options. title! = ""){
$ ("# Artwl_title" pai.html (options. title );
}
If (options. content! = ""){
$ ("# Artwl_message" 2.16.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)/22.16.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)/22.16.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 );
Calling is also very simple. After the JS file is introduced on the page, you can 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 parameter is the element ID of the event triggered by the pop-up layer, the second parameter is the title of the pop-up layer, and the third parameter is the content of the pop-up layer.
Notes
For ease of use, this plug-in writes JS and CSS in a file. To adjust the style of the pop-up layer, you can modify the following CSS.
CSS code of the plug-in:
Copy codeThe 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;
}
In addition, IE6 does not support transparency, and is displayed in IE6 as follows:
IE6
Other browsers
Demo: http://xiazai.jb51.net/201203/yuanma/thickbox_demo.rar