jquery.mask.js
(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 = "<img src=\"" + post_url + "\" width=600 height=600/>";
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 = '700';
// 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 = '700';
// 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.
$('#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
#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;
}
如何使用
<mce:script src="
<!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="