Kuidas luua JavaScripti hoiatuskasti või hüpikakent

Hüpikastid (või dialoogiboksid) on modaalsed aknad, mida kasutatakse kasutaja teavitamiseks või hoiatamiseks või kasutaja sisendi saamiseks.

Hüpikaknad takistavad kasutajal juurdepääsu programmi muudele aspektidele kuni hüpiku sulgemiseni, mistõttu ei tohiks neid üle kasutada.

JavaScriptis kasutatakse kolme erinevat hüpikmeetodit: window.alert (), window.confirm () ja window.prompt ().

Hoiatus

Hoiatusmeetod kuvab teateid, mis ei nõua kasutajalt vastuse sisestamist. Kui see funktsioon on kutsutud, kuvatakse määratud (valikuline) sõnumiga hoiatusdialoog. Kasutajad peavad enne teate kustumist kinnitama sõnumi.

Näide:

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

MDN-i hoiatuse näide

Kinnitage

Kinnitusmeetod on sarnane window.alert(), kuid kuvab hüpikaknas ka tühistamisnupu. Nupud tagastavad tõeväärtused: tõene OK ja vale Tühista.

Näide:

var result = window.confirm('Are you sure?'); if (result === true) { window.alert('Okay, if you're sure.'); } else { window.alert('You seem uncertain.'); }
MDN kinnita näide

Kiire

Kiirmeetodit kasutatakse tavaliselt kasutajalt tekstisisestuse saamiseks. Sellel funktsioonil võib olla kaks argumenti, mis mõlemad on valikulised: kasutajale kuvatav teade ja tekstiväljal kuvatav vaikeväärtus.

Näide:

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

MDN-i viide

Muud kujundusvalikud:

Kui te pole rahul JavaScripti vaikehüpetega, saate need asendada erinevates kasutajaliidese teekides. Näiteks pakub SweetAlert mõnusat asendust JavaScripti standardsetele modaalidele. Saate selle lisada oma HTML-i CDN-i (sisuvõrgu) kaudu ja alustada kasutamist.

Süntaks on selline: swal(title, subtitle, messageType)

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

Ülaltoodud kood loob järgmise hüpikakna:

SweetAlerti näide

SweetAlert ei ole kaugeltki ainus tavaliste modaalide asendaja, kuid see on puhas ja hõlpsasti rakendatav.

Rohkem informatsiooni:

  • MDN window.alert ()
  • MDN window.confirm ()
  • MDN window.prompt ()