HTML
Il primo passo è creare un layer <DIV> nel quale andremo a mettere testi e bottoni.
<DIV ID="msgBox">
<SPAN ID="msgBoxtext">
Ciao Gino bella giornata
</SPAN>
<br>
<A ID="msgBox1" onclick="javascript:msgBoxYes()">Yes</A>
<A ID="msgBox2" onclick="javascript:msgBoxNo()">No</A>
</DIV>
Css
Il tag <STYLE> permette di inserire inline (cioè dentro allo stesso file) una porzione di CSS: deve essere inserito all'interno della sezione <HEAD> (anche se poco cambia metterlo dentro al <BODY>
<STYLE>
DIV#msgBox {width:450px; height:386px; background-color:yellow; color: navy; border: thin inset red;
position: absolute; left: 150px; top:50px; text-align:center; margin:40px; display:none}
DIV#msgBox A {text-decoration: none; font-size:120%; width:30%; height:10%; border:thin inset black; margin-top:200px}
A#msgBox1 {font-weight: bold}
</STYLE>
(Lo so che fa schifo, concentriamci sul javascript e basta)
Script
Anche lo script è inline, con il tag <SCRIPT>.
Vediamolo nel dettaglio
<SCRIPT LANGUAGE="JavaScript">
Assegno una variabile al layer che contiene il messaggio; così dovrò cercare il layer una volta sola, mentre i bottoni che chiudono la finestra di messaggio possono accedere direttamente alla variabile.
Qui sto contravvenendo a quanto detto nel decalogo: la manipolazione diretta dello stile.
Però lo sto facendo con il solo proposito di mostrare/nascondere un elemento; possiamo anche definire una classe "nascosto" e associare classi multiple ad un oggetto; ma non aggiungeremmo nulla alla manutenibilità del codice.
var msgBoxDiv
function showMessage(msg)
{
msgBoxDiv = document.getElementById("msgBox")
msgBoxDiv.style.display = "block"
}
Il message Box ha due bottoni; ciascuno invoca una funzione diversa, che provvede - come minimo - a chiudere (nascondere) il layer.
Per il posizionamento dei layers, display:block indica che il tag viene visualizzato su una nuova riga e seguito da un a capo; display:inline che segue il testo; display: none che non viene proprio visualizzato; è più comodo per il layout manipolare display: che non visibility:
function msgBoxYes()
{
alert('yes');
msgBoxDiv.style.display = "none"
}
function msgBoxNo()
{
alert('no');
msgBoxDiv.style.display = "none"
}
</SCRIPT>
I file descritti in questo articolo si possono scaricare dall'introduzione