Sådan oprettes en JavaScript-advarselsboks eller et pop op-vindue

Pop-up-bokse (eller dialogbokse) er modalvinduer, der bruges til at underrette eller advare brugeren eller for at få input fra brugeren.

Pop-up-bokse forhindrer brugeren i at få adgang til andre aspekter af et program, indtil popup-enheden lukkes, så de bør ikke overanvendes.

Der er tre forskellige slags popup-metoder, der anvendes i JavaScript: window.alert (), window.confirm () og window.prompt ().

Alert

Alarmeringsmetoden viser meddelelser, der ikke kræver, at brugeren indtaster et svar. Når denne funktion er kaldt, vises en alarmdialogboks med den specificerede (valgfri) besked. Brugere skal bekræfte beskeden, før alarmen forsvinder.

Eksempel:

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

MDN-advarselseksempel

Bekræfte

Bekræftelsesmetoden ligner window.alert(), men viser også en annulleringsknap i pop op. Knapperne returnerer boolske værdier: sand for OK og falsk for Annuller.

Eksempel:

var result = window.confirm('Are you sure?'); if (result === true) { window.alert('Okay, if you're sure.'); } else { window.alert('You seem uncertain.'); }
MDN-bekræftelseseksempel

Hurtig

Spørgsmetoden bruges typisk til at få tekstinput fra brugeren. Denne funktion kan tage to argumenter, som begge er valgfri: en meddelelse, der skal vises til brugeren, og en standardværdi, der skal vises i tekstfeltet.

Eksempel:

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

Eksempel på MDN-prompt

Andre designmuligheder:

Hvis du er utilfreds med standard pop op-vinduer i JavaScript, kan du erstatte i forskellige UI-biblioteker. For eksempel giver SweetAlert en god erstatning for standard JavaScript-modeller. Du kan medtage det i din HTML via et CDN (indholdsleveringsnetværk) og begynde at bruge det.

Syntaksen er som sådan: swal(title, subtitle, messageType)

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

Ovenstående kode producerer følgende popup:

SweetAlert Eksempel

SweetAlert er på ingen måde den eneste erstatning for standardmodeller, men det er rent og let at implementere.

Mere information:

  • MDN-vindue. Alarm ()
  • MDN-vindue. Bekræft ()
  • MDN window.prompt ()