Click para cerrar

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="EDITOR WYSIWYG" />
<title>EDITOR WYSIWYG</title>
<script>
function $(id){
return document.getElementById(id);
}
function cargar(){
a=$('editor').contentDocument || $('editor').contentWindow.document;
a.designMode='On';
}
function color(col){ a.execCommand('forecolor',false,col); }
function italic(){ a.execCommand('italic',false, null);}
function formato(evento){ a.execCommand(evento,false,null);}
function enlace(c){ c=c.value; a.execCommand('CreateLink',false,c); }
function imagen(c){ a.body.focus(); a.execCommand("InsertImage",false,c); }

function resaltar(){ var b=a.getElementsByTagName('body'); var contenido=b[0].innerHTML; alert(contenido); }
function creacaja(funcion){
var a=document.createElement('div');
a.setAttribute('id','codigosss');
a.style.background='#333';
a.style.width="200px";
a.style.position="absolute";
var x=Position($('addurl'));
a.style.top=x.top;
a.style.left=x.left;
a.style.opacity=0.9;
a.style.padding="10px";
a.style.color="#999";
a.innerHTML="Inserte la url<br></br><input type=\"text\" id=\"codeurl\" /><input type=\"button\" onclick=\""+funcion+"(document.getElementById('codeurl'))\" value=\"Añadir\" /><br></br><div style='border:1px solid #F30; padding:2px; font-size:10px; background:#666; font-family:Verdana,Geneva;cursor:pointer;' onclick='cerrar();'>Cerrar</div>";
document.body.appendChild(a);
document.getElementById('codeurl').focus();
}
function cerrar(){
document.body.removeChild(document.getElementById('codigosss'));
}
function Position(element) {
if (typeof element == "string")
element = document.getElementById(element)

if (!element) return { top:0,left:0 };

var y = 0;
var x = 0;
while (element.offsetParent) {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
}
return {top:y,left:x};
}
function mostrarcolores(){
var x=Position($('col'));
$('tablacolores').style.display='block';
$('tablacolores').style.left=x.left+100;
$('tablacolores').style.top=x.top+100;

}
</script>
<style>
.contenedor-botones{width:495px; background:#9C0; padding:2px;}
.cuadro{ width:15px; height:15px; float:left; margin-left:1px;}
.colores{width:150px; height:150px; display:none; background:#333; padding:4px; left:300px; position:absolute; opacity:0.8;}
.button{background:#FFF; color:#F60; font-family:Verdana, Geneva, sans-serif; font-size:10px; }
</style>
</head>

<body onload="cargar();">
<form id="formulario" method="post">
<div class='contenedor-botones'>
<div class='colores' id='tablacolores' onclick="this.style.display='none';">
<input type="button" class="cuadro" style="background:#F30000;" id='#F30000' onclick="color(this.id)">
<input type="button" class="cuadro" style="background:#FC0;" id='#FFCC00' onclick="color(this.id)">
<input type="button" class="cuadro" style="background:#093;" id='#339900' onclick="color(this.id)">
<input type="button" class="cuadro" style="background:#03C;" id='#0033CC' onclick="color(this.id)">
<input type="button" class="cuadro" style="background:#999;" id='#666666' onclick="color(this.id)">
<input type="button" class="cuadro" style="background:#333;" id='#333333' onclick="color(this.id)">
<input type="button" class="cuadro" style="background:#9C0;" id='#CCFF33' onclick="color(this.id)">
<input type="button" class="cuadro" style="background:#F60;" id='#FF6600' onclick="color(this.id)">
<input type="button" class="cuadro" style="background:#36C;" id='#0066CC' onclick="color(this.id)">
<input type="button" class="cuadro" style="background:#F39;" id='#FF00FF' onclick="color(this.id)">
<input type="button" class="cuadro" style="background:#339;" id='#3300CC' onclick="color(this.id)">
<input type="button" class="cuadro" style="background:#FFF;" id='#FFFFFF' onclick="color(this.id)">
<div style="color:#CCC; width:150px; float:left;">Click para cerrar</div>
</div>
<input type="button" id='col' value="color" onclick="mostrarcolores();">
<input type="button" value="italic" onclick="italic();">
<input type="button" value="sacar formato" onclick="formato('removeFormat');">
<input type="button" value="Añadir Url" id='addurl' onclick="creacaja('enlace');">
<input type="button" value="Add Imagen" id='addurl' onclick="creacaja('imagen');">
</div>
<iframe id="editor" name="editor" style="width:500px; height:300px" scrolling="auto" frameborder="1"></iframe></form>
<div><input type="button" onclick="resaltar()" value="Mostrar" class='button' /></div>
<p></p>

</body>
</html>