Prima di poter usare la nostra message box dobbiamo renderla modale.

Una finestra modale è una finestra che non restituisce il controllo all'applicazione finché non viene chiusa dall'utente. E' un tipico esempio la domanda "Procedo" con i bottoni "Si" e "No". La funzione attende che la finestra di dialogo venga chiusa per procedere.

 

Nel nostro caso abbiamo dovuto definire le funzioni di callback per ottenere questo risultato.

Però dobbiamo anche impedire che l'utente interagisca con il resto della pagina finché non ci ha dato una risposta. Per farlo, il modo più simpatico è creare un layer grande quanto la pagina da mettere dietro alla nostra message box. in questo modo i clic saranno impossibili.

 

 

Il layer ha il background dello stesso colore della message box ed è semi trasparente. Dovremo posizionarlo tramite la funzione di creazione _msgBox()

	this.divMsgModal = document.getElementById("msgModalDiv")
	this.divMsgBox = document.getElementById("msgBoxDiv")

metto il layer modale fullscreen; innerHeight&width non sono disponibili su IE.
ma offsetWidth e height hanno un significato diverso tra i browser.
quindi uso il costrutto (condizione?true:false) per valorizzare le mie variabili
cwidth e cheight che indicano le dimensioni dell'area visibile.

	var cwidth = (window.innerWidth>0?window.innerWidth: document.body.offsetWidth)
	var cheight = (window.innerHeight>0?window.innerHeight: document.body.offsetHeight)
	this.divMsgModal.style.width = cwidth;
	this.divMsgModal.style.height = cheight;

Per ottenere la trasparenza, uso un comando diverso per IE e firefox:

		opacity: 0.30; /* css2 */
		filter:alpha(opacity=30); /* IE */ 

Oltre a posizionare il layer devo anche centrare il box del messaggio:  

	this.divMsgBox.style.left = parseInt(cwidth)/2-parseInt(this.layerWidth)/2+'px';
	this.divMsgBox.style.top = parseInt(cheight)/2-parseInt(this.layerHeight)/2+'px';

 

---

I file descritti in questo articolo si possono scaricare dall'introduzione