自己写的一个遮罩层插件

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