Casetele pop-up (sau casetele de dialog) sunt ferestre modale utilizate pentru a notifica sau avertiza utilizatorul sau pentru a obține intrări de la utilizator.

Casetele pop-up împiedică utilizatorul să acceseze alte aspecte ale unui program până când pop-up-ul este închis, deci nu ar trebui să fie suprasolicitate.

Există trei tipuri diferite de metode pop-up utilizate în JavaScript: window.alert (), window.confirm () și window.prompt ().

Alerta

metoda de alertă afișează mesaje care nu necesită ca utilizatorul să introducă un răspuns. Odată ce această funcție este apelată, va apărea o casetă de dialog de alertă cu mesajul specificat (opțional). Utilizatorii vor trebui să confirme mesajul înainte ca alerta să dispară.

Exemplu:

window.alert("Welcome to our website");

Exemplu de alertă MDN

A confirma

confirmă metoda este similar cu window.alert(), dar afișează și un buton de anulare în fereastra pop-up. Butoanele returnează valori booleene: adevărat pentru OK și fals pentru Anulare.

Exemplu:

var result = window.confirm('Are you sure?');
if (result === true) {
    window.alert('Okay, if you're sure.');
} else { 
    window.alert('You seem uncertain.');
}
Exemplu de confirmare MDN

Prompt

metoda promptă este de obicei folosit pentru a obține introducerea de text de la utilizator. Această funcție poate lua două argumente, ambele fiind opționale: un mesaj de afișat utilizatorului și o valoare implicită de afișat în câmpul de text.

Exemplu:

var age = prompt('How old are you?', '100');

Exemplu de prompt MDN

Alte opțiuni de proiectare:

Dacă nu sunteți nemulțumit de ferestrele pop-up JavaScript implicite, puteți înlocui în diferite biblioteci de interfață. De exemplu, SweetAlert oferă un înlocuitor frumos pentru modurile JavaScript standard. Puteți să îl includeți în HTML prin intermediul unui CDN (rețea de livrare a conținutului) și să începeți utilizarea.

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Sintaxa este ca atare: swal(title, subtitle, messageType)

swal("Oops!", "Something went wrong on the page!", "error");

Codul de mai sus va produce următorul popup:

Exemplu SweetAlert

SweetAlert nu este în niciun caz singurul înlocuitor pentru modele standard, dar este curat și ușor de implementat.

Mai multe informatii: