Pop-up JavaScript

• Aprile 18, 2024

JavaScript è stato progettato per aggiungere interattività alle pagine Web, quindi non sorprende che abbia diverse funzioni per semplificare la raccolta e la visualizzazione di informazioni da parte di un utente tramite finestre pop-up. Prima di esaminare queste caselle, tieni presente che sebbene siano spesso il modo più semplice per raccogliere e visualizzare informazioni, non sono necessariamente le più attraenti o facili da usare. Tra le altre cose, i pop-up richiedono che l'utente prema un pulsante per chiudere la finestra dopo ogni messaggio o input: ciò può invecchiare rapidamente. Inoltre, dal punto di vista del web design, hai davvero pochissimo controllo sulla presentazione delle informazioni nelle finestre pop-up. Detto questo, nel posto giusto e usati con moderazione, le finestre pop-up possono essere sia semplici che efficaci.

Esistono tre tipi di caselle popup: avviso, conferma e richiesta. Il pop-up più semplice e più comunemente usato è attento. L'avviso accetta un argomento: un messaggio per l'utente. Quando viene visualizzata una finestra di avviso, l'utente non può continuare fino a quando non preme il pulsante "OK". Il codice per una finestra di avviso è semplice:

alert ("Questo è un avviso")



La casella di conferma è solo leggermente più complicata. Come avviso, conferma accetta un argomento: il messaggio. Quando viene visualizzata una finestra di conferma, l'utente può scegliere di rispondere utilizzando i pulsanti "OK" o "Annulla". A differenza dell'avviso, conferma ha un valore di ritorno: 0 indica che l'utente ha premuto "Annulla" e 1 significa "OK". Il codice per una casella di conferma è identico a una casella di avviso, tranne per il fatto che si desidera raccogliere il valore restituito in qualche modo:

save_me = confirm ("Questo è un pop-up di conferma")



Sebbene sia il più complicato dei pop-up, prompt è ancora abbastanza semplice. Il prompt accetta due argomenti: un messaggio per l'utente e un valore predefinito (o "" se non si desidera alcun valore predefinito.) Quando viene visualizzata la finestra del prompt, l'utente può inserire le informazioni richieste e premere "OK". C'è anche un pulsante "Annulla". Il valore restituito è la risposta dell'utente. Se l'utente annulla il valore restituito è nullo. Se lasciano vuota la finestra del prompt, il valore restituito sarà la stringa vuota (""). Probabilmente vuoi controllare questi valori e fare qualcosa di speciale piuttosto che usarlo nullo o la stringa vuota come risposta. Il codice per una finestra di prompt è:

response = prompt ("Questo è un prompt", "Rispondi qui")



Puoi visualizzare una dimostrazione di queste caselle pop-up qui

---

Istruzioni Video: Build a Popup With JavaScript (Aprile 2024).