如何在堆栈溢出中显示弹出消息 [英] How to show popup message like in Stack Overflow

问题描述

我想添加一个弹出式消息，比如当我没有登录时出现在Stack Overflow上，并尝试使用投票按钮。

什么是实现这一目标的最佳方法？
是使用jquery库完成的吗？

解决方案

编辑：下面的代码显示当您获得新徽章时，如何复制显示在屏幕顶部的横条，首先来到网站等。对于您尝试快速评论时获得的悬停对话框，请为您自己的问题投票，等等，请查看这个问题，在这里我展示了如何做到这一点或只是请直接访问示例。

---

以下是Stackoverflow的功能：

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

 < div id ='message'style =display：none;> 
< span>嘿，这是我的信息。< / span> 
< a href =＃class =close-notify> X< / a> 
< / div> 
  

以下是应用的样式：

  #message {
 font-family：Arial，Helvetica，sans-serif; 
位置：固定; 
 top：0px; 
 left：0px; 
宽度：100％; 
 z-index：105; 
 text-align：center; 
 font-weight：bold; 
 font-size：100％; 
颜色：白色; 
 padding：10px 0px 10px 0px; 
背景颜色：＃8E1609; 
} 
 
 #message span {
 text-align：center; 
宽度：95％; 
 float：left; 
} 
 
 .close-notify {
 white-space：nowrap; 
 float：right; 
 margin-right：10px; 
颜色：#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; 
 }）; 
}）; 
  

瞧。根据您的页面设置，您可能还想要编辑显示的页边空白页。

下面是它的一个演示。

I would like to add a popup message like the one that appears on Stack Overflow when I am not logged in and I try to use voting buttons.

What is the best method for achieving that? Is it done using a jquery library?

解决方案

EDIT: The code below shows how to replicate the bars that show at the top of the screen when you get a new badge, first come to the site, etc. For the hovering dialogs that you get when you try to comment too fast, vote for your own question, etc, check out this question where I show how to do this or just go straight to the example.

---

Here's how Stackoverflow does it:

This is the markup, initially hidden so we can fade it in:

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

Here are the styles applied:

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

And this is javascript (using jQuery):

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

And voila. Depending on your page setup you might also want to edit the body margin-top on display.

Here is a demo of it in action.

这篇关于如何在堆栈溢出中显示弹出消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！