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/