In alternativa, puoi fare un DIV che passa dallo stato di display: ; a quello di display = "none" tramite JavaScript.
Ma non puoi cambiare la fisionomia delle finestre di alert confirm prompt che è lasciata volutamente legata al funzionamento interno dei browser.

Nota che per come lo hai definito, lo stile non si può legare a nessun elemento:

#alertBox
e id="alertBox" nel Tag

.alertBox (col puntino)
e class="alertBox" nei Tag

ma il solo alertBox indicherebbe **Elemento** alertBox , che non esiste;
potresti invece fare:

div {
/* proprietà di stile */
}

e lo stile si estende su tutti gli Elementi div presenti nel body; il div è un Elemento mica di fantasia ...

codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

	<head>
		<title>prova alertbox</title>

	<style type="text/css">
	#alertBox {
	 position:relative;
	 width:300px;
	 min-height:100px;
	 margin-top:50px;
	 border:2px solid #000;
	 background-color:#F2F5F6;
	 background-image:url(alert.png);
	 background-repeat:no-repeat;
	 background-position:20px 30px;
        }
	</style>
	
<script language="javascript">
  function nascondiDIV(){
   document.getElementById("alertBox").style.display = "none";
  }; 
</script> 
	</head>
	<body>

<div id="alertBox">
 
 <input value="chiudi" type="button" onClick='nascondiDIV();' 
  style="background-color:#F2F5F6; font-family: monospace;">
</div>
	</body>
</html>