Just like Stackoverflow, Some floating text box at the top of webpage

Question

I am not sure whether Stackoverflow is the right place for this question, but I think it has something to do with Javascript.

Here is what I want to add to my webpage: a floating text box at the top of the webpage, you can close it by clicking the "X".

Just like the YELLOW BOX in the following picture (Welcome to Q&A blah blah....):

I tried to Google but I dont know the right phrase for this.

I have read these two questions: CSS to achieve a similar fixed floating div thast always on top of other divs - like stackoverflow does? and div with fixed position.

But How to add the close it by clicking the "X" button at the right?

Also, I like the color of Stackoverflow's floating text box so much. What the color is it?

Can someone give me the code that Stackoverflow uses?

Thanks a lot!

Answer 1

To add a closing button you could use javascript or jQuery if you use jQuery, you would do something like :

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>

simple example: http://jsfiddle.net/mazlix/dcY2A/2/

Answer 2

Let's say you have a div at the top of your page with an X button like so:

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

You can make the close button hide the message box using jQuery like so:

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