如何在stackoverflow中显示弹出消息 [英] How to show popup message like in stackoverflow

问题描述

我希望添加一个弹出消息，例如我在未登录时显示在stackoverflow上的消息，并尝试使用投票按钮。最好的方法实现？
是使用jquery库完成的吗？

解决方案

EDIT 如何复制显示在屏幕顶部的酒吧，当你得到一个新的徽章，首先来到网站等。对于你尝试评论得太快的悬停对话框，投票你自己的问题等，请查看此问题，其中显示了如何执行此操作或只是请直接访问示例。

---

这是Stackoverflow如何做的：

这是标记，初始隐藏，所以我们可以淡化：

 < div id ='message'style =display：none;> 
< span>嘿，这是我的消息。< / 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; 
 }）; 
}）; 
  

根据您的页面设置，您可能还需要编辑显示的主体边距顶部。

这里是一个演示。

I would like to add a popup message like the one that appears on stackoverflow 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.

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