Hover check and hide

by Graham Fairweather

HTML

<div id="box" class="box">
    <div id="message"></div>
    <button id="button1">
        <img src="http://img856.imageshack.us/img856/3817/ticklf.png" alt />Ok</button>
    <button id="button2">
        <img src="http://img822.imageshack.us/img822/1917/crossn.png" alt />Cancel</button>
</div>

CSS

.box {
    width:300px;
    height:100px;
    position: absolute;
    top: 30%;
    left: 30%;
    background-color:yellow;
    border:2px solid;
}
#message {
    position: absolute;
    right: 50%;
    bottom: 50%;
}
#button1 {
    position: absolute;
    right: 0;
    bottom: 0;
}
#button2 {
    position: absolute;
    right: 4em;
    bottom: 0;
}

JavaScript

function dontBubble(evt) {
    evt.stopPropagation();
}

function hideBox(evt) {
    box.hidden = true;
}

function messgage() {
    document.getElementById("message").textContent = "I'm ignoring you";
}

document.getElementById("box").addEventListener("click", dontBubble, false);
document.getElementById("button1").addEventListener("click", messgage, false);
document.getElementById("button2").addEventListener("click", hideBox, false)
document.addEventListener("click", hideBox, false);