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.
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.
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.
JavaScript bekräftar rätt svar
JavaScript bekräftar fel svar