自己写的一个遮罩层插件

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 = "<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
[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; 
} 

如何使用   
[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="

摘自 beauty9235的专栏