Kuinka luoda JavaScript-hälytyslaatikko tai ponnahdusikkuna

Ponnahdusikkunat (tai valintaikkunat) ovat modaalisia ikkunoita, joita käytetään ilmoittamaan tai varoittamaan käyttäjää tai saamaan käyttäjältä tietoja.

Ponnahdusikkunat estävät käyttäjää pääsemästä muihin ohjelman osa-alueisiin, kunnes ponnahdusikkuna on suljettu, joten niitä ei tule käyttää liikaa.

JavaScriptissä käytetään kolmea erilaista ponnahdusikkunamenetelmää: window.alert (), window.confirm () ja window.prompt ().

Varoitus

Hälytystapa näyttää viestit, jotka eivät vaadi käyttäjää antamaan vastausta. Kun tämä toiminto on kutsuttu, näkyviin tulee hälytysvalintaikkuna, jossa on määritetty (valinnainen) viesti. Käyttäjien on vahvistettava viesti ennen ilmoituksen poistumista.

Esimerkki:

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

MDN-hälytysesimerkki

Vahvistaa

Vahvistusmenetelmä on samanlainen kuin window.alert(), mutta näyttää myös peruutuspainikkeen ponnahdusikkunassa. Painikkeet palauttavat loogiset arvot: tosi OK: lle ja epätosi Peruuta-arvolle.

Esimerkki:

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

Kysy

Kehotustapaa käytetään tyypillisesti tekstinsyötön saamiseksi käyttäjältä. Tässä toiminnossa voi olla kaksi argumenttia, jotka molemmat ovat valinnaisia: viesti, joka näytetään käyttäjälle, ja oletusarvo, joka näytetään tekstikentässä.

Esimerkki:

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

MDN-kehotusesimerkki

Muut suunnitteluvaihtoehdot:

Jos et ole tyytyväinen oletusarvoisiin JavaScript-ponnahdusikkunoihin, voit korvata ne eri käyttöliittymäkirjastoissa. Esimerkiksi SweetAlert tarjoaa mukavan korvaavan tavallisen JavaScript-modeemin. Voit sisällyttää sen HTML-koodiin CDN: n (sisältötoimitusverkko) kautta ja aloittaa käytön.

Syntaksi on sellaisenaan: swal(title, subtitle, messageType)

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

Yllä oleva koodi tuottaa seuraavan ponnahdusikkunan:

SweetAlert-esimerkki

SweetAlert ei suinkaan ole ainoa standardimodaalien korvike, mutta se on puhdas ja helppo toteuttaa.

Lisää tietoa:

  • MDN window.alert ()
  • MDN-ikkuna. Vahvista ()
  • MDN window.prompt ()