Modal form
Create una funzione showPrompt(html, callback) che mostra un form con un messaggio html, un campo di input ed i pulsanti OK/CANCEL.
- Un utente dovrebbe digitare qualcosa nel campo di testo e premere Enter o il pulsante OK, quindi verrà chiamata
callback(value)con il valore che è stato inserito. - Altrimenti, se l’utente preme Esc oppure CANCEL, viene chiamata
callback(null).
In entrambi i casi, questo termina l’elaborazione dell’input e rimuove il form.
Requisiti:
- Il form dovrebbe essere al centro della finestra.
- Il form è modal. In altre parole, non possono esserci interazioni con il resto della pagina fino a quando non viene chiusa.
- Quando viene mostrato il form, il focus dovrebbe essere dentro il campo
<input>per l’utente. - I tasti Tab/Shift+Tab dovrebbe cambiare il focus tra i campi del form, e non permettergli di lasciarlo per altri elementi della pagina.
Un esempio di come dovrebbe funzionare:
showPrompt("Enter something<br>...smart :)", function(value) {
alert(value);
});Una demo nell’iframe:
P.S.: Il sorgente del documento ha HTML e CSS per il form, con posizionamento fixed, ma sta a te renderla modale.
Una finestra modale può essere implementata usando un <div id="cover-div"> semitrasparente che copre l’intera finestra, in questa maniera:
#cover-div {
position: fixed;
top: 0;
left: 0;
z-index: 9000;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.3;
}Dato che il <div> copre ogni cosa, sarà questo elemento a catturare tutti i click, e non la pagina sottostante.
Inoltre può essere prevenuto lo scrolling della pagina impostando body.style.overflowY='hidden'.
Il form non dovrebbe essere dentro il <div>, ma subito dopo nel codice della pagina (quindi starà anche sopra), perché non vogliamo che sia soggetto alla trasparenza dovuta ad opacity.