Question

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

以下是我要添加到网页的内容：网页顶部的浮动文本框，您可以点击“X”关闭它。

就像下图中的黄色框（欢迎来到Q＆amp; A blah blah ....）： enter image description here

我试过谷歌，但我不知道这句话的正确用语。

我已阅读了这两个问题：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使用的代码吗？

非常感谢！

Answer 1

要添加关闭按钮，如果使用jQuery，可以使用javascript或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/

Answer 2

假设您的页面顶部有一个div，其中包含一个X按钮：

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

您可以使用关闭按钮隐藏消息框，如下所示：

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

Answer 3

这绝对是提出这个问题的好地方！

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

这是一个小提琴演示：

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

请注意，我正在使用jQuery。如果您需要纯JavaScript解决方案，请告诉我：）

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

Answer 4

你可以查看meerkat插件。

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

Answer 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'

});

唯一的区别是，在我的演示中，条形图绝对定位，但您可以根据需要调整css。

P.S。颜色好吗？ ;）

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

5 个答案:

DEMO