我想添加一条弹出消息，如我未登录并尝试使用投票按钮时出现在 Stack Overflow 上的消息。
实现这一目标的最佳方法是什么？ 是否使用 jquery 库完成？
【问题讨论】：
标签： javascript jquery html css
编辑：下面的代码显示了当您获得新徽章、首次访问网站等时如何复制屏幕顶部显示的条形图。对于悬停对话框，您当您尝试评论太快、为自己的问题投票等时，请查看this question，我将在其中展示如何执行此操作，或者直接转到example。
Stackoverflow 的做法如下：
这是标记，最初是隐藏的，因此我们可以将其淡入：
<div id='message' style="display: none;">
<span>Hey, This is my Message.</span>
<a href="#" class="close-notify">X</a>
</div>
以下是应用的样式：
#message {
font-family:Arial,Helvetica,sans-serif;
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:105;
text-align:center;
font-weight:bold;
font-size:100%;
color:white;
padding:10px 0px 10px 0px;
background-color:#8E1609;
}
#message span {
text-align: center;
width: 95%;
float:left;
}
.close-notify {
white-space: nowrap;
float:right;
margin-right:10px;
color:#fff;
text-decoration:none;
border:2px #fff solid;
padding-left:3px;
padding-right:3px
}
.close-notify a {
color: #fff;
}
这是javascript（使用jQuery）：
$(document).ready(function() {
$("#message").fadeIn("slow");
$("#message a.close-notify").click(function() {
$("#message").fadeOut("slow");
return false;
});
});
然后瞧。根据您的页面设置，您可能还需要编辑显示的 body margin-top。
【讨论】：
【讨论】：
我用jqModal，好用，你可以实现一些很棒的效果
【讨论】：
使用 AJAX 控件工具包中的ModalPopup 是获得此效果的另一种方式。
【讨论】：
这是我通过查看 StackOverflow 源代码发现的。希望为某人节省一些时间。 showNotification 函数用于所有这些弹出消息。
var showNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg)};
var showFadingNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg,true)};
//master...
showErrorPopup: function (e, h, f) {
var g = $('<div class="error-notification supernovabg"><h2>' + h + "</h2>" + (f ? "" : "(click on this box to dismiss)") + "</div>");
var i = function () {
g.fadeOutAndRemove()
};
$(e).append(g);
g.click(i).fadeIn("fast");
setTimeout(i, (f ? Math.max(2500, h.length * 40) : 1000 * 30))
}
css
.error-notification{z-index:1;cursor:pointer;display:none;position:absolute;padding:15px;-moz-box-shadow:2px 2px 5px #000;-webkit-box-shadow:2px 2px 5px #000;box-shadow:2px 2px 5px #000;}
.error-notification a{color:inherit;text-decoration:underline;}
.error-notification li{font-size:110%;padding-top:3px;}
.supernovabg{color:#fff !important;background-color:#fe7a15 !important;}
他们如何使用消息的长度来设置淡入淡出超时，这很酷。我没有意识到所有（非淡化样式）消息实际上在 30 秒后淡出。
【讨论】：
检查bootstrap。有一些弹出效果，模态，过渡，警报，一切都基于javascript和css。
【讨论】：