我想添加一条弹出消息,就像我未登录时出现在 Stack Overflow 上的消息一样,我尝试使用投票按钮。
实现这一目标的最佳方法是什么?它是使用 jquery 库完成的吗?
我想添加一条弹出消息,就像我未登录时出现在 Stack Overflow 上的消息一样,我尝试使用投票按钮。
实现这一目标的最佳方法是什么?它是使用 jquery 库完成的吗?
编辑:下面的代码显示了如何在您获得新徽章、首次访问网站等时复制屏幕顶部显示的条。对于尝试过快评论时出现的悬停对话框,请投票对于您自己的问题等,请查看我展示如何执行此操作的问题,或者直接进入示例。
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 秒后淡出。