TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan opprette varsel, be, bekrefte dialogbokser ved hjelp av JavaScript?

6

Lag dialogboksen Varsel ved hjelp av JavaScript

Varseldialogboksen er et popup-vindu som bare vises i nettleseren med en "OK" -knapp for å informere en veldig liten melding til brukerne. Varslingsboks skal brukes til å vise en advarsel eller en informasjonsmelding. For eksempel:

  • En velkomstmelding til brukeren når nettstedet er lastet inn
  • Valideringsresultat av et ugyldig resultat
  • En informasjon om nettstedets nedetid eller vedlikeholdstid.

Her diskuterer vi hvordan du oppretter en popup -boks ved bruk av JavaScript med eksempelkode. Lær mer om hvordan du oppretter varsler i Bootstrap 4.

Hvordan det fungerer?

JavaScript -varslingsfunksjonen() utløses når et script påkalles på en side som viser strengargumentet i en popup -varselboks. Før varslingsboksen er besvart, vil ikke nettleseren fortsette å laste inn websiden.

Syntaks

alert("Your Message Here");

Eksempel

Nedenfor er en eksempelkode for en varselboks i JavaScript. Denne boksen vil dukke opp når siden lastes inn som en velkomstboks, og har et alternativ til å klikke på "OK" -knappen eller lukke dialogboksen i nettlesere som Google Chrome. Så snart brukeren klikker på "OK" (eller lukker) vil et bilde lastes inn. Nettleseren vil stoppe behandlingen av siden til en varselboks reagerer.

<HTML> <HEAD> <TITLE>ALERT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> alert("Welcome to Our Website!!!"); document.write('<IMG SRC=""/>'); </SCRIPT> </BODY> </HTML>

Nedenfor er bildet av en varselboks i Chrome -nettleseren når koden ovenfor kjøres.

Hvordan opprette varsel, be, bekrefte dialogbokser ved hjelp av JavaScript?

JavaScript -varselboks i Google Chrome

Lag en dialogboks med spørsmål ved hjelp av JavaScript

Spør dialogboksen brukes til å vise den tilpassede utskriften på en webside basert på brukerens input. I motsetning til en varselboks som brukes til å vise en kort melding med en enkelt "OK" -knapp, har hurtigboksen følgende funksjoner:

  • Vis en forhåndsbestemt melding på esken
  • Brukeren kan skrive inn en tekst i tekstboksen
  • Brukerinndata sendes tilbake til skriptet
  • Spørreboksen har to knapper "OK" og "Avbryt"

Hvordan det fungerer?

Prompt -boksen stopper også lasting av nettsiden til et svar mottas fra brukeren. Den trenger følgende to sett med informasjon:

  • En melding som skal vises i ledeteksten
  • Standardtekst som skal vises i tekstboksen – dette er valgfritt; du kan la standardteksten stå tom
  • Når du klikker på "OK" -knappen, blir teksten i boksen sendt til skriptet
  • Når du klikker på "Avbryt" -knappen, sendes NULL -verdien tilbake til skriptet

Syntaks

prompt ("Message", "Default Value");

Eksempel

prompt ("What is the color you like?", "Green");

Praktisk eksempel for å lage en dialogboks med spørsmål ved hjelp av JavaScript

Prompt -boks kan brukes i mange praktiske scenarier, og et slikt eksempel er å hilse på brukeren sammen med navnet. Følgende kode vil be om brukernavnet når siden er lastet inn, og deretter legge til navnet med hilsenmeldingen for å vise det i nettleseren.

<HTML> <HEAD> <TITLE>PROMPT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> document.write("<h1>Greetings</h1>"); document.write(prompt("Enter Your Name: ", "Name")); document.write(" Welcome to Our Site!</h1>"); </SCRIPT> </BODY> </HTML>

Hvordan det ser ut?

Nedenfor er bildet av en hurtigboks i Chrome -nettleseren når koden ovenfor kjøres.

Hvordan opprette varsel, be, bekrefte dialogbokser ved hjelp av JavaScript?

JavaScript Prompt Box i Google Chrome

Når brukeren skriver inn navnet og trykker på "OK" -knappen, sendes navnet til skriptet og alle meldingene vises i henhold til document.write -funksjonen. Tom plass i inndataboksen blir også betraktet som et gyldig navn av JavaScript -ledeboksen.

Prompt Box Display med brukernavn

Når brukeren klikker på "Avbryt" -knappen, blir nullverdien passert og vist i nettleseren i stedet for navnet.

Prompt Box Display med nullverdi

Opprett Bekreft dialogboks ved hjelp av JavaScript

Dette er en tredje type dialogboks som finnes i JavaScript i tillegg til meldingsbokser. Denne delen forklarer hvordan du oppretter dialogboksen for bekreftelse ved hjelp av JavaScript, som brukes til å bekrefte handlingen som er utført av brukeren.

Bekreft dialogboksen har følgende funksjoner:

  • En forhåndsbestemt melding som skal vises på esken
  • To knapper – OK og Avbryt

Hvordan det fungerer?

Bekreft boksen som andre dialogbokser stopper også kjøringen til brukerens svar er mottatt. Brukerhandling kan enten være OK eller Avbryt.

  • Verdien true overføres til det oppringende programmet når du trykker på OK -knappen
  • Verdien false blir sendt til det ringende programmet når du trykker på Avbryt -knappen

Syntaks

confirm ("Message");

Eksempel

confirm ("Do you want to close this window?");

Praktisk eksempel

Følgende JavaScript -kode bruker en rask metode for å stille et spørsmål til brukeren. En bekreftelsesboks vises for å vise at svaret er riktig eller feil.

<HTML> <HEAD> <TITLE>CONFIRM BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> var q = "What is 5+5?"; var a = 10; var c = "<h2>You are a Genius</h2>"; var ic = "<h2>Reload to Try Again</h2>"; var response = prompt(q,"0"); if (response != a) { alert("Wrong, Better Luck Next Time!!!"); } else { alert("Correct! Well done!!!"); } var o = (response == a)? c: ic; document.write("<BR/>"); document.write(o); </SCRIPT> </BODY> </HTML>

Hvordan det ser ut?

Nedenfor er bildet av en ledetekstboks i Chrome -nettleseren når koden ovenfor kjøres og bekreftelsesboksen vises basert på korrektheten i svaret i tekstboksen.

Hvordan opprette varsel, be, bekrefte dialogbokser ved hjelp av JavaScript?

JavaScript bekrefter riktig svar

Hvordan opprette varsel, be, bekrefte dialogbokser ved hjelp av JavaScript?

JavaScript bekrefter feil svar

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon