A self-written mask layer plug-in

Jquery. mask. js [javascript] (function ($) {$. fn. popupfunction () {return $ (this ). live (& quot; click & quot;, function (e) {varpop_id $ (this ). attr (& amp; #39; id & amp; #39 ;). split (&

Jquery. mask. js
[Javascript]
(Function ($ ){
$. Fn. Popup = function (){
Return $ (this). live ("click", function (e ){
Var pop_id = $ (this). attr ('id'). split (':') [1];
Var content = "";
If ($ (this). attr ('url ')){
Var pop_url = $ (this). attr ('url ');
Var suffix = pop_url.substring (pop_url.lastIndexOf ('.') + 1). toLowerCase ();
If (suffix = "jpg" | suffix = "png" | suffix = "gif "){
Content = "";
Pop_url = "";
}
} Else if ($ (this). attr ('content ')){
Content = $. base64.encode ($ (this). attr ('content '));
}
DivOpen (pop_id, pop_url, content );
$ ('A. popin-close, # fade '). live ('click', function (){
$ ('# Fade,. popin-Block'). fadeOut (function (){
$ ('# Fade'). remove ();
});
Return false;
});
Function divOpen (pop_id, post_url, content ){
Var suffix = post_url.substring (post_url.lastIndexOf ('.') + 1). toLowerCase ();
If (! $ ('#' + Pop_id). length ){
If (post_url! = ""){
$. Ajax ({
Url: post_url,
Type: 'post ',
Complete: function (response ){
$ ('Body'). append (''+ response. responseText + '');
// Define margin for center alignment (vertical horizontal)-we add 80px to the height/width to accomodate for the padding and border width defined in the css
Var popWidth = '20140901 ';
// Fade in the Popup and add close button
$ ('#' + Pop_id).fadeIn().css ({'width': Number (popWidth)}). prepend ('');
 
Var popMargTop = ($ ('#' + pop_id). height () + 80)/2;
Var popMargLeft = ($ ('#' + pop_id). width () + 80)/2;
// Apply Margin to Popup
$ ('#' + Pop_id).css ({'margin-top':-popMargTop, 'margin-left':-popMargLeft });
},
DataType: 'text ',
Data: {pop_id: pop_id}
});
} Else {
$ ('Body'). append (''+ content + '');
// Var popWidth = $ ('#' + pop_id + "img"). width () + 20;
Var popWidth = '20140901 ';
// Fade in the Popup and add close button
$ ('#' + Pop_id).fadeIn().css ({'width': Number (popWidth)}). prepend ('');
Var popMargTop = ($ ('#' + pop_id). height () + 80)/2;
Var popMargLeft = ($ ('#' + pop_id). width () + 80)/2;
// Apply Margin to Popup
$ ('#' + Pop_id).css ({'margin-top':-popMargTop, 'margin-left':-popMargLeft });
}
} Else {
$ ('#' + Pop_id). fadeIn ();
}
// Fade in Background
$ ('Body'). append (''); // Add the fade layer to bottom of the body tag.
Certificate ('{fade'}.css ({'filter': 'Alpha (opacity = 70 )'}). fadeIn (); // Fade in the fade layer -. css ({'filter': 'Alpha (opacity = 80) '}) is used to fix the IE Bug on fading transparencies
Return false;
}
})
}
}) (JQuery );
JQuery. noConflict ();
JQuery (function ($ ){
$ (Document). ready (function (){
$ ('[Id ^ = "display_popup:"]'). Popup ();
});
})

 
Mask.css
[Css]
# Fade {
Display: none;
Background: #000;
Position: absolute;
Left: 0;
Top: 0;
Width: 100%;
Height: 100%;
Opacity:. 80;
Z-index: 99998;
}
 
 
. Popin-block {
Display: none;
Background: # fff;
Padding: 4px 20px 20px 20px;
Border: 20px solid # ddd;
Float: left;
Font-size: 11px;
Position: absolute;
Top: 50%;
Left: 50%;
Z-index: 99999;
-Webkit-box-shadow: 0px 0px 20px #000;
-Moz-box-shadow: 0px 0px 20px #000;
Box-shadow: 0px 0px 20px #000;
-Webkit-border-radius: 10px;
-Moz-border-radius: 10px;
Border-radius: 10px;
}
 
A. popin-close {
Float: right;
Position: relative;
Margin:-34px-50px 0 0;
Background: url (/admin/images/cross.png) no-repeat top left;
Height: 28px;
Width: 28px;
Z-index: 9999999;
}
 
. Content {
Margin-bottom: 16px;
}
 
. Content p {
Margin-bottom: 10px;
}
 
. Content p. last {
Margin-bottom: 0px;
}
 
. Content ol {
Margin-bottom: 10px;
}
 
. Content ul {
Margin-bottom: 10px;
}
 
. Content ul li {
Background: url (/admin/images/grey-bullet.png) no-repeat 0 5px;
Padding-left: 12px;
}
 
. Content. large-liste li {
Margin-bottom: 5px;
}
 
. Content. extra-large-liste li {
Margin-bottom: 10px;
}
 
. Content ol {
List-style-type: decimal;
Margin-left: 24px;
}
 
. Content ol. roman {
List-style-type: lower-roman;
}
 
. Content ol. alpha {
List-style-type: lower-alpha;
}

How to Use
[Html]
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
 
 
<Br/>