dhl:juery提示插件：jquery.Popup.js

/* jQuery Dialogs Plugin
Cory S.N. LaViska (http://abeautifulsite.net/)
Edit by 杜宏雷  2010-10-22
//用法：
showLoading(msg, elem) 消息，消息显示的控件id
showTip(msg, elem, autoClose) 消息，消息显示的控件id，是否自动关闭

*/
(function ($) {
    $.popup = {
        ID: null,
        title: "",
        top: 0,
        left: 0,
         0,
        height: 0,
        popType: "",
        repositionOnResize: false,          // 窗口调整大小后是否重新定位
        okButton: '确 定',                  // 确定按钮
        cancelButton: '取 消',              // 取消按钮
        isButtonRow: false,                  // 是否显示按钮
        isPopup: false,                      // 是否为popup窗口
        autoClose: 0,                       // 窗口自动关闭 (大于0时窗口自动关闭)

        // 公共方法
        tip: function (elem, msg, top, left, autoClose) {
            this.ID = 'tip';
            this.popType = 'tip';
            this.title = '';
            this.isPopup = false;
            this.autoClose = autoClose || 0;
            this.width = 240;
            this.height = 30;

            //this.top = top || ($(document).height() - this.height) / 2;
            
            //this.left = left || ($(document).width() - this.width) / 2;
            //this.top = top || ($(window).height() - this.height) / 2;
            //this.left = left || ($(window).width() - this.width) / 2;
            
            this.top = document.documentElement.scrollTop + window.screen.height/ 3;
            this.left = left || ($(window).width() - this.width) / 2;
            $.popup._show(elem, msg, null);
        },

        help: function (elem, title, msg, height) {
            this.ID = 'help';
            this.title = title || this.title;
            this.width = 271;
            this.height = height || 40;
            var top = $(elem).offset().top;
            if (top - 60 - this.height > 0) {
                this.top = $(elem).offset().top - 60 - this.height;
                this.popType = 'help_up';
            }
            else {
                this.top = top + 16;
                this.popType = 'help_down';
            }
            this.left = $(elem).offset().left - 30;
            $.popup._show(elem, msg);
        },

        prompt: function (elem, title, msg, isButtonRow, isPopup, callback, top, left, width, height) {
            this.ID = 'prompt';
            this.title = title || this.title;
            this.popType = 'prompt';
            this.isButtonRow = isButtonRow || this.isButtonRow;
            this.isPopup = isPopup || this.isPopup;
            this.top = top || $(elem).offset().top + 16;
            this.left = left || $(elem).offset().left;
            this.width = width || 300;
            this.height = height || 120;
            $.popup._show(elem, msg, function (result) {
                if (callback) callback(result);
            });
        },

        // 私有方法
        _show: function (elem, msg, callback) {
            
            if ($("#_Popup_" + this.ID).length < 1) {
                //$.popup._hide();
                var html =
			    '<div class="popup_' + this.popType + '" id="_Popup_' + this.ID + '" style="' + this.width + 'px">\
                  <div class="popup_header" id="_Title_"><h1>' + this.title + '</h1><div class="h_r"></div></div>\
                  <div class="popup_content">\
                    <div id="_Container_' + this.ID + (this.height == 0 ? '">' : '" style="height:' + this.height + 'px">') + msg + '</div></div>' +
                    (this.isButtonRow ? '<div class="buttonRow" id="_ButtonRow_' + this.ID + '"></div>' : '') +
                  '<div class="popup_bottom"><div class="b_r"></div>\
                </div>';
                //$(elem).append(html);

                if (this.popType == "tip" && elem != null) {
                    $(elem).append(html);
                    //alert(elem);
                }
                else {
                    $("BODY").append(html);
                    //alert(this.popType);
                }
                // IE6 Fix
                //var pos = ($.browser.msie && parseInt($.browser.version) <= 6) ? 'absolute' : 'fixed';

                $("#_Popup_" + this.ID).css({
                    position: 'absolute',
                    zIndex: 100,
                    padding: 0,
                    margin: 0
                });

                $("#_Popup_" + this.ID).css({
                    minWidth: $("#_Popup_" + this.ID).outerWidth(),
                    maxWidth: $("#_Popup_" + this.ID).outerWidth()
                });

                if (elem == null) { $.popup._reposition(); }
                //$.popup._reposition();
                $.popup._maintainPosition(true);

                $.popup._bindType();
                
                if (this.autoClose > 0) {
                    $.popup._autoClose();
                }
            }
            else {
                $("#_Container_" + this.ID).html(msg);
                $.popup._bindType(callback);
                $.popup._reposition();
                $.popup._maintainPosition(true);
                $("#_Popup_" + this.ID).show();
                if (this.autoClose > 0) {
                    $.popup._autoClose();
                }
            }
        },

        _bindType: function (callback) {
            switch (this.popType) {
                case 'help':
                    if (this.isButtonRow) {
                        $("#_ButtonRow_" + this.ID).after('<input type="button" value="' + $.popup.okButton + '" id="_ButtonOK_' + this.ID + '" />');
                        $("#_ButtonOK_" + this.ID).click(function () {
                            $.popup._hide();
                            callback(true);
                        });
                        $("#_ButtonOK_" + this.ID).keypress(function (e) {
                            if (e.keyCode == 13 || e.keyCode == 27) $("#_ButtonOK_" + this.ID).trigger('click');
                        });
                    }
                    break;
                case 'prompt':
                    if (this.isButtonRow) {
                        $("#_ButtonRow_" + this.ID).html('<input type="hidden" id="hid_' + this.ID + '" />\
                        <input type="button" value="' + $.popup.okButton + '" id="_ButtonOK_' + this.ID + '"/>\
                        <input type="button" value="' + $.popup.cancelButton + '" id="_ButtonCancel_' + this.ID + '"/>');
                        $("#_ButtonOK_" + this.ID).click(function () {
                            var val = $("#hid_" + this.ID).val();
                            $.popup._hide();
                            if (callback) callback(val);
                        });
                        $("#_ButtonCancel_" + this.ID).click(function () {
                            $.popup._hide();
                            if (callback) callback(null);
                        });
                        $("#_ButtonOK_" + this.ID + ", #_ButtonCancel_" + this.ID).keypress(function (e) {
                            if (e.keyCode == 13) $("#_ButtonOK_" + this.ID).trigger('click');
                            if (e.keyCode == 27) $("#_ButtonCancel_" + this.ID).trigger('click');
                        });
                    }
                    break;
                case 'tip':
                    break;
                default:
                    break;
            }

        },

        _hide: function () {
            if ($("#_Popup_" + this.ID).length > 0) {
                if (this.popType == "tip") {
                    $("#_Popup_" + this.ID).delay(800).fadeOut(500);
                }
                else {
                    $("#_Popup_" + this.ID).remove();
                }
                $.popup._maintainPosition(false);
            }
        },

        _autoClose: function () {
            setTimeout("$.popup._hide()", this.autoClose * 2000);
        },

        _reposition: function () {
            var top = this.top || (($(document).height() / 2) - ($("#popup_container").outerHeight() / 2));
            var left = this.left || (($(document).width() / 2) - ($("#popup_container").outerWidth() / 2));
            if (top < 0) top = 0;
            if (left < 0) left = 0;
            // IE6 fix
            //if ($.browser.msie && parseInt($.browser.version) <= 6) top = top + $(window).scrollTop();
            $("#_Popup_" + this.ID).css({
                top: top + 'px',
                left: left + 'px'
            });
        },

        _maintainPosition: function (status) {
            if ($.popup.repositionOnResize) {
                switch (status) {
                    case true:
                        $(window).bind('resize', $.popup._reposition);
                        break;
                    case false:
                        $(window).unbind('resize', $.popup._reposition);
                        break;
                }
            }
        }

    }

    // 显示Loading信息
    showLoading = function (msg, elem) {
        var loadingMsg = msg || '正在加载数据，请稍候...';
        if (elem == null) {
            $.popup.tip(elem, '<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr>' +
                '<td align="center"><img src="http://images.cnblogs.com/icons/loading.gif" /> ' + loadingMsg + '</td></tr></table>', null, null, 0);
        } else {
            var middle = ($(elem).height() - 30) / 2;
            var top = $(elem).offset().top + (middle > 0 ? middle : 0);
            $.popup.tip(elem, '<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr>' +
                 '<td align="center"><img src="http://images.cnblogs.com/icons/loading.gif" /> ' + loadingMsg + '</td></tr></table>', top, null, 0);
        }
    }
    hideTip = function () {
        $("#_Popup_tip").fadeOut(500);
    }
    showTip = function (msg, elem, autoClose) {
        if (elem == null) {
            //alert("elem==null");
            $.popup.tip(null, '<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr>' +
                '<td align="center">' + msg + '</td></tr></table>', null, null, autoClose);
        } else {
            var middle = ($(elem).height() - 50) / 2;
            var top = $(elem).offset().top + (middle > 0 ? middle : 0);
            //alert(top);
            $.popup.tip(elem, '<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr>' +
                '<td align="center">' + msg + '</td></tr></table>', top, null, autoClose);
        }
    }
    showHelper = function (elem, title, msg, height) {
        $.popup.help(elem, title, msg, height);
    }

    showPrompt = function (elem, title, msg, isButtonRow, isPopup, callback, top, left, width, height) {
        $.popup.prompt(elem, title, msg, isButtonRow, isPopup, callback, top, left, width, height);
    }

})(jQuery);

 

CSS：

/*
*
{
	padding:0;
	margin:0;
	font-size:13px;
}
a{
  color:#333;
}
ul li{
  height:25px;
}
*/
.popup_prompt{
	border:1px solid #909090; 
	background:#FFF; 
}
.popup_prompt .popup_header{

}
.popup_prompt h1
{
	height:25px;
	margin:1px;
	font-size:13px;
	color:#F4793A;
	font-weight:bold;
	text-indent:10px;
	padding-top:7px;
}
.popup_prompt .popup_content
{
	margin:1px;
	padding:10px;
	font-size:13px;
}
.popup_prompt .buttonRow
{
	height:30px;
	line-height:30px;
	text-align:right;
	margin:1px;
}
.popup_prompt input
{
	color:#555;
	border:1px solid #808080;
	margin-right:5px;
	height:20px;
	line-height:18px;
	padding:0px 3px;
}
/*------- Tip Style -------*/
.popup_tip
{
	border:1px #FF7101 solid;
	vertical-align:middle;
	
}
.popup_tip .popup_content
{
	color:#000;
	background:#FCFBE0;
	text-align:center;
}
.popup_tip img
{
	vertical-align:middle;
}
/*------- Help Style -------*/
.popup_help_up,.popup_help_down
{
	271px;
	filter:Alpha(Opacity=85);
}
.popup_help_up
{
	background:url(/images/tip/help_t1.gif) left top no-repeat;
}
.popup_help_down
{
	background:url(/images/tip/help_t2.gif) left top no-repeat;
}
.popup_help_up a:link,.popup_help_down a:link
{
	text-decoration:underline;
}
.popup_help_up .popup_header
{
	margin-top:9px;
}
.popup_help_down .popup_header
{
	margin-top:22px;
}
.popup_help_up .popup_header,.popup_help_down .popup_header
{
	height:18px;
	border-left:1px #000 solid;
	border-right:1px #000 solid;
	background:#FFFFE1;
}
.popup_help_up .popup_header h1,.popup_help_down .popup_header h1
{
	font-size:13px;
	text-indent:28px;
	background:url(/images/icons/action.gif) 10px 0px no-repeat;
}
.popup_help_up .popup_content,.popup_help_down .popup_content
{
	line-height:16px;
	padding:5px 10px;
	border-left:1px #000 solid;
	border-right:1px #000 solid;
	background:#FFFFE1;
}
.popup_help_up .popup_bottom
{
	height:22px;
	background:url(/images/tip/help_b1.gif) left top no-repeat;
}
.popup_help_down .popup_bottom
{
	height:9px;
	background:url(/images/tip/help_b2.gif) left top no-repeat;
}

调用；

<link href="/content/css/jquery.Popup.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/jquery.Popup.js"></script>

showTip("发布成功！", null, 1);  //在屏幕中间

showTip("发布成功！", "#bottom", 1); 指定id中显示

 如果在$的方法中，应该先调用jQuery.noConflict()方法，否则会出js错 无$.pop 对象！

 var sign = $("#Sel_Sign").val();
            $.post("/MemberCenter/UpdateSignAjax", { 'Sign': sign }, function (data) {
                if (data != "") {
                    $("#txindex_topms").html(data);
                    $("#txindex_toptm").html(Date());
                    jQuery.noConflict();
                    showTip("发布成功！", "#bottom", 1);
                }
                else {
                    jQuery.noConflict();
                    showTip("发布失败！", null, 1);
                }