Javascript 如何显示像堆栈溢出一样的弹出消息

我想添加一个弹出消息，就像我没有登录并且尝试使用投票按钮时堆栈溢出上出现的消息一样

实现这一目标的最佳方法是什么？

---

它是使用jquery库完成的吗？

我使用，易于使用，您可以获得一些非常好的效果

此外，使用AJAX控件工具包中的签出是获得此效果的另一种方法。

编辑：下面的代码显示了如何复制获得新徽章时屏幕顶部显示的条形图，首先来到网站，等等。当你试图评论得太快时，你会看到悬停的对话框，为你自己的问题投票，等等，看看我在哪里展示了如何做，或者直接进入页面

---

下面是Stackoverflow的工作原理：

这是标记，最初是隐藏的，以便我们可以淡入：

<div id='message' style="display: none;">
    <span>Hey, This is my Message.</span>
    <a href="#" class="close-notify">X</a>
</div>

这是javascript（使用jQuery）：

瞧。根据您的页面设置，您可能还需要在屏幕顶部编辑正文页边距

---

以下是我在查看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))
}

---

他们如何使用消息的长度来设置衰落超时，这很酷。我没有意识到所有的（非褪色风格）信息实际上在30秒后都会褪色。

检查。有一些弹出效果、模态、转换、警报，以及基于

javascript

和

css

的所有内容查看源代码！这是一个问题。你可能也想检查一下。我做了，它似乎引用了question.min.js。我找不到那个插件，所以我问了这个问题Dojo有一个升级栏，可以这样做：请评论下一票，使用模式弹出对原始问题的提问完全有效。重读问题我认为这不是Op想要的。我想他是在寻找那些在你所做的任何事情附近作为通知出现的盒子。我想不管怎样我都会把这个忘了。保罗，谢谢你把这个忘了！我认为这可能比我在这个动作中使用的要好一些。虽然不是答案，但同样有用：当你点击X时，你还需要设置一个cookie，这样当你进入更多页面时，它就不会一直出现。我希望我也能给答案加上星号。谢谢你的精彩作品！

$(document).ready(function() {
    $("#message").fadeIn("slow");
    $("#message a.close-notify").click(function() {
        $("#message").fadeOut("slow");
        return false;
    });
});

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))
}

.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;}