自己写的一个遮罩层插件

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;}

如何使用   

<!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="