css + javascript hide div

Als er iets mis gaat wordt er een div over het scherm getrokken van 100% bij 100%, hierop staat de melding. Nu wil ik als je op die melding klikt de div weggaat.
Ik heb al verschillende dingen geprobeerd, maar geen enkele werkt, wie kan mij helpen?

ik heb een css file waarin staat

#error {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
left: 0;
top: 0;

}

js file met

var browserType;

if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {browserType= "gecko"}

function hide() {
if (browserType == "gecko" )
document.poppedLayer = eval('document.getElementById(\'error\')');
else if (browserType == "ie")
document.poppedLayer = eval('document.all[\'error\']');
else
document.poppedLayer = eval('document.layers[\'`error\']');
document.poppedLayer.style.visibility = "hidden";
}

function show() {
if (browserType == "gecko" )
document.poppedLayer = eval('document.getElementById(\'error\')');
else if (browserType == "ie")
document.poppedLayer = eval('document.all[\'error\']');
else
document.poppedLayer = eval('document.layers[\'`error\']');
document.poppedLayer.style.visibility = "visible";
}

button op de div

<input type=button onClick="hide()" value="hide">