Kako izraditi JavaScript okvir upozorenja ili skočni prozor

Skočni okviri (ili dijaloški okviri) modalni su prozori koji se koriste za obavještavanje ili upozorenje korisnika ili za dobivanje korisničkih podataka.

Skočni okviri sprečavaju korisnika da pristupi ostalim aspektima programa dok se skočni prozor ne zatvori, tako da ih se ne smije pretjerano koristiti.

U JavaScript se koriste tri različite vrste skočnih metoda: window.alert (), window.confirm () i window.prompt ().

Upozorenje

Način upozorenja prikazuje poruke koje ne zahtijevaju od korisnika da unese odgovor. Jednom kada je ova funkcija pozvana, pojavit će se dijaloški okvir upozorenja s navedenom (neobaveznom) porukom. Korisnici će morati potvrditi poruku prije nego što upozorenje nestane.

Primjer:

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

Primjer MDN upozorenja

Potvrdite

Način potvrde sličan je window.alert(), ali u skočnom prozoru prikazuje i gumb za otkazivanje. Gumbi vraćaju logičke vrijednosti: true za OK i false za Cancel.

Primjer:

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

Potaknuti

Način upita obično se koristi za unos teksta od korisnika. Ova funkcija može uzeti dva argumenta, a oba su neobavezna: poruka za prikaz korisniku i zadana vrijednost za prikaz u tekstnom polju.

Primjer:

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

Primjer upita za MDN

Ostale mogućnosti dizajna:

Ako niste zadovoljni zadanim skočnim prozorima za JavaScript, možete ih zamijeniti u raznim bibliotekama korisničkog sučelja. Na primjer, SweetAlert pruža lijepu zamjenu za standardne JavaScript modele. Možete ga uključiti u svoj HTML putem CDN-a (mreža za dostavu sadržaja) i započeti upotrebu.

Sintaksa je takva: swal(title, subtitle, messageType)

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

Gornji kôd će proizvesti sljedeći skočni prozor:

Primjer SweetAlert

SweetAlert nikako nije jedina zamjena za standardne modele, ali je čist i jednostavan za primjenu.

Više informacija:

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