就像 Stackoverflow，网页顶部的一些浮动文本框答案

【问题标题】：Just like Stackoverflow, Some floating text box at the top of webpage就像 Stackoverflow，网页顶部的一些浮动文本框
【发布时间】：2011-07-20 19:02:02
【问题描述】：

我不确定 Stackoverflow 是否适合回答这个问题，但我认为它与 Javascript 有关。

这是我要添加到我的网页的内容：网页顶部的浮动文本框，您可以通过单击“X”将其关闭。

就像下图中的黄色框（欢迎来到 Q&A blah blah....）：

我试过谷歌，但我不知道正确的短语。

我已经阅读了这两个问题：CSS to achieve a similar fixed floating div thast always on top of other divs - like stackoverflow does? 和 div with fixed position。

但是如何通过点击右侧的“X”按钮来添加关闭呢？

另外，我非常喜欢 Stackoverflow 的浮动文本框的颜色。它是什么颜色的？

谁能给我 Stackoverflow 使用的代码？

非常感谢！

【问题讨论】：

使用 firebug 并获得所有答案。
在 Firefox 中安装 Firebug，或者在 Chrome 中使用开发者工具 - 两者都允许您检查页面上的任何元素，您可以从中提取 CSS 设置（颜色、大小、定位等）。 .)
颜色，做一个打印屏幕：背景是#F4A83D，文字是#735005。 SO使用jQuery :)
使用以下 css 创建一个 div：position:absolute; width:100%; top:0px; z-index:-1' 对于结束部分，google 'javascript onclick delete element'
@Jonah Katz：不要使用绝对，使用固定...绝对只会是页面顶部，而不是屏幕顶部（即向下滚动将使其消失）跨度>

标签： javascript jquery html css

【解决方案1】：

要添加关闭按钮，您可以使用 javascript 或 jQuery，如果您使用 jQuery，您可以执行以下操作：

HTML：

<div id="yellowbar">
    <div id="xbtn">x</div>
</div>

javascript：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <!-- load jquery-->
    <!--jquery code-->
    <script>
        $(function(){
            $("#xbtn").click(function(){
                $("#yellowbar").hide();
            });
        });
</script>

简单示例：http://jsfiddle.net/mazlix/dcY2A/2/

【讨论】：

另外，你可以使用 slideUp() 或任何你想隐藏黄色条的动画......你的选择只受你的想象力（和 IE）的限制
$(function() { $("#xbtn").click(function(){ $("#yellowbar").hide(); }); }); 和$("#xbtn").click(function(){ $("#yellowbar").hide(); }); 有什么区别@Josh 回答中的额外$(function() 是多余的吗？
哦..实际上您可能应该使用额外的$(function(){....（更新）...$(function(){...}); 之间的任何内容仅在 DOM 完成加载后运行...因为我将脚本放在底部，在这种情况下，如果您的<script> 高于<div>，我的底部将不起作用，因为脚本将引用尚不存在的<div>。例如：jsfiddle.net/mazlix/dcY2A/6 有效，而 jsfiddle.net/mazlix/dcY2A/5 无效
有些教程甚至使用$(document).ready(function(){。哪一个更好？这里：webdesignerwall.com/tutorials/jquery-tutorials-for-designers 他们在
中使用它。
完全没有区别，$(function(){ 只是$(document).ready(function(){.. 的缩写。

【解决方案2】：

假设您在页面顶部有一个带有 X 按钮的 div，如下所示：

<div class="floatingBox" id="message1">
  <span class="message">Your message</span>
  <img src="x-button.png" id="closeButton"/>
</div>

您可以像这样使用 jQuery 使关闭按钮隐藏消息框：

$(function() {
  $('#closeButton').click(function() {
    $('#message1').hide();
  });
});

【讨论】：

【解决方案3】：

这绝对是问这个问题的正确地方！

浮动框的背景颜色为：F4A83D
浮动框的边框颜色为：D6800C
浮动框中的文字颜色为：735005

这是一个小提琴演示：

http://jsfiddle.net/UnsungHero97/FQ3fz/

请注意，我使用的是 jQuery。如果你想要一个纯 JavaScript 解决方案，请告诉我:)

我希望这会有所帮助。
赫里斯托

【讨论】：

【解决方案4】：

您可以查看 meerkat 插件。

http://www.jarodtaylor.com/meerkat/howto/

【讨论】：

【解决方案5】：

这里！

DEMO

$(document).ready(function() {

    // add some 'if unknown user' check.
       var infoH = $('#infobar').height();
       $('#infobar').animate({top:'0px'},1000);
       $('#infoclose').click(function(){
          $('#infobar').animate({ top:'-'+infoH },1000);
       });
    // close 'if'

});

唯一的区别是在我的演示中，bar是绝对定位的，但是你可以随意调整css。

附：颜色好吗？ ;)

【讨论】：