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 ('<div id = "' + pop_id + '" class = "popin-block">' + response. responseText + '</div> ');
// 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 ('<a href = "#" class = "popin-close"> </a> ');
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 ('<div id = "' + pop_id + '" class = "popin-block">' + content + '</div> ');
// 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 ('<a href = "#" class = "popin-close"> </a> ');
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 ('<div id = "fade"> </div>'); // 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]
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title>
</Title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Link rel = "stylesheet" href = "/css/mask.css" type = "text/css">
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.pack.js"> </script>
<Script type = "text/javascript" src = "/js/jquery. mask. js"> </script>
</Head>
<Body>
<A id = "display_popup: tips_search" url = "/admin/Pop.html"> aaaa </a>
<A id = "display_popup: tips_search1" url = "/temp/customerlogo/fittingbox/example/1264608019521.jpg"> aaaa </a>
</Body>
</Html>
<Mce: script src ="
From the beauty9235 Column