TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag en varning, frågar, bekräftar dialogrutor med JavaScript?

9

Skapa varningsdialogrutan med JavaScript

Varningsdialogrutan är ett popup-fönster som bara visas i webbläsaren med en "OK" -knapp för att informera ett mycket litet meddelande till användarna. Varningsruta ska användas för att visa ett varningsmeddelande eller ett informationsmeddelande. Exempel:

  • Ett välkomstmeddelande till användaren när webbplatsen laddas
  • Valideringsresultat av ett ogiltigt resultat
  • En information om webbplatsens avbrottstid eller underhållstid.

Här diskuterar vi hur man skapar en popup -låda med hjälp av JavaScript med exempelkod. Läs mer om hur du skapar varningar i Bootstrap 4.

Hur det fungerar?

JavaScript alert() -funktionen utlöses när ett skript anropas på en sida som visar strängargumentet i en popup -varningsruta. Tills varningsrutan har svarats kommer webbläsaren inte att fortsätta ladda webbsidan.

Syntax

alert("Your Message Here");

Exempel

Nedan finns en exempelkod för en varningsruta i JavaScript. Den här rutan dyker upp när sidan laddas som en välkomstruta och har ett alternativ att klicka på "OK" -knappen eller stänga dialogrutan i webbläsare som Google Chrome. Så snart användaren klickar på "OK" (eller stänger) laddas en bild. Webbläsaren kommer att sluta behandla sidan tills en varningsruta besvaras.

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

Nedan visas bilden av en varningsruta i webbläsaren Chrome när ovanstående kod körs.

Hur skapar jag en varning, frågar, bekräftar dialogrutor med JavaScript?

JavaScript Alert Box i Google Chrome

Skapa snabbdialogrutan med JavaScript

Prompt -dialogrutan används för att visa den anpassade utdata på en webbsida baserat på användarens inmatning. Till skillnad från en varningsruta som används för att visa ett kort meddelande med en enda "OK" -knapp, har snabbrutan följande funktioner:

  • Visa ett förutbestämt meddelande i rutan
  • Användaren kan ange en ingång i textrutan
  • Användarinmatningen skickas tillbaka till skriptet
  • Frågelistan har två knappar "OK" och "Avbryt"

Hur det fungerar?

Promptbox stoppar också inläsningen av webbsidan tills den får ett svar från användaren. Den behöver följande två uppsättningar information:

  • Ett meddelande som ska visas i snabbrutan
  • Standardtext som ska visas i textrutan – detta är valfritt; du kan lämna standardtexten tom
  • När du klickar på knappen "OK" skickas texten i rutan till skriptet
  • När du klickar på knappen "Avbryt" skickas NULL -värdet tillbaka till skriptet

Syntax

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

Exempel

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

Praktiskt exempel för att skapa dialogrutan Fråga med JavaScript

Promptbox kan användas i många praktiska scenarier och ett sådant exempel är att hälsa användaren tillsammans med namnet. Följande kod frågar efter användarnamnet när sidan laddas och lägger sedan till namnet med hälsningsmeddelandet för att visa det i webbläsaren.

<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>

Hur det ser ut?

Nedan visas bilden av en promptbox i Chrome -webbläsaren när koden ovan körs.

Hur skapar jag en varning, frågar, bekräftar dialogrutor med JavaScript?

JavaScript Prompt Box i Google Chrome

När användaren anger namnet och trycker på "OK" -knappen, skickas namnet till skriptet och alla meddelanden visas enligt document.write -funktionen. Tomt utrymme i inmatningsrutan betraktas också som ett giltigt namn med JavaScript -promptbox.

Prompt Box Display med användarnamn

När användaren klickar på knappen "Avbryt" skickas nollvärdet och visas i webbläsaren istället för namnet.

Promptbox -display med nollvärde

Skapa dialogrutan Bekräfta med JavaScript

Detta är en tredje typ av dialogruta som tillhandahålls i JavaScript förutom en snabb- och varningsruta. Det här avsnittet förklarar hur du skapar en dialogruta för bekräftelse med JavaScript som används för att bekräfta åtgärden som användaren vidtagit.

Bekräfta dialogrutan har följande funktioner:

  • Ett förutbestämt meddelande som ska visas i rutan
  • Två knappar – OK och Avbryt

Hur det fungerar?

Bekräfta rutan liksom andra dialogrutor stoppar också körningen tills användarens svar tas emot. Användaråtgärd kan vara antingen OK eller Avbryt.

  • Värdet sant överförs till det uppringande programmet när OK -knappen trycks in
  • Värdet falsk skickas till det uppringande programmet när knappen Avbryt trycks in

Syntax

confirm ("Message");

Exempel

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

Praktiskt exempel

Efter JavaScript -koden används snabbmetoden för att ställa en fråga till användaren. En bekräftelse visas för att visa att svaret är korrekt eller fel.

<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>

Hur det ser ut?

Nedan visas bilden av en snabbruta i Chrome -webbläsaren när ovanstående kod körs och bekräftelserutan visas baserat på att svaret i textrutan är korrekt.

Hur skapar jag en varning, frågar, bekräftar dialogrutor med JavaScript?

JavaScript bekräftar rätt svar

Hur skapar jag en varning, frågar, bekräftar dialogrutor med JavaScript?

JavaScript bekräftar fel svar

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer