Q:

Warning message popup with a button that closes it

I want to add an "X" button at the top right of the message so people can close it. Can any of you help me? I'm not really that good in JavaScript
Here's the HTML:
<div class="warning">This is just a test.</div>

Here's the CSS:
.warning {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('images/icons/warning.gif');
}

A:

You can use absolute positioning to set your close image.
You just need to wrap your markup with parent div container
<div class="parent">
<div class="warning">This is just a test.</div>
    <img class="close" src="http://findicons.com/files/icons/1715/gion/24/dialog_cancel.png" />
</div>

Then add css like this
.parent
{
  position:relative;
}
.close
{
    position:absolute;
    top:-15px;
    right:-15px;
    height:20px;
    width:20px;
}

JS Fiddle
And to hide this. You just need to add some javascript code.

