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,
width: 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="width:' + 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
{
width: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);
}