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

Inspelningskälla: www.webnots.com