Create Alert Dialog Box Using JavaScript
Alert dialog box is a pop-up window appearing on the browser only with a “OK” button to inform a very small message to the users. Alert box shall be used to display a warning message or an information message. For example:
- A welcome message to the user when the site is loaded
- Validation result of an invalid result
- An information regarding the site down time or maintenance time.
Here we discuss how to create alert popup box using JavaScript with example code. Learn more about creating alerts in Bootstrap 4.
How it Works?
The JavaScript alert() function is triggered when a script is invoked in a page which will display the string argument in a popup alert box. Until the alert box is responded the browser will not continue loading the webpage.
Syntax
alert("Your Message Here");
Example
Below is an example code of an alert box in JavaScript. This box will be popped up when the page is loaded as a welcome box and will have an option to click on “OK” button or close the dialog box in browsers like Google Chrome. As soon as the user clicks on “OK” (or close) an image will be loaded. The browser will stop processing of the page till the time an alert box is responded.
<HTML>
<HEAD>
<TITLE>ALERT BOX EXAMPLE</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
alert("Welcome to Our Website!!!");
document.write('<IMG SRC=""/>');
</SCRIPT>
</BODY>
</HTML>
Below is the picture of an alert box in Chrome browser when the above code is executed.
JavaScript Alert Box in Google Chrome
Create Prompt Dialog Box Using JavaScript
Prompt dialog box is used to display the customized output on a webpage based on the user input. Unlike an alert box which is used to display a short message with a single “OK” button, prompt box has the following features:
- Display a predetermined message on the box
- User can enter an input in the text box
- The user input is passed back to the script
- Prompt box has two buttons “OK” and “Cancel”
How it Works?
Prompt box also halts the loading of webpage till the time a response is received from the user. It needs the following two set of information:
- A message to be displayed in the prompt box
- Default text to be displayed in the text box – this is optional; you can leave the default text blank
- When the “OK” button is clicked then the text entered in the box is passed to the script
- When the “Cancel” button is clicked then the NULL value is passed to the script back
Syntax
prompt (“Message”, “Default Value”);
Example
prompt (“What is the color you like?”, “Green”);
Practical Example to Create Prompt Dialog box Using JavaScript
Prompt box can be used in many practical scenarios and one such an example is to greet the user along with the name. The following code will ask for the user name when the page is loaded and then add the name with the greeting message to display it in the browser.
<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>
How it Looks?
Below is the picture of a prompt box in Chrome browser when the above code is executed.
JavaScript Prompt Box in Google Chrome
When the user enters the name and press “OK” button then the name is passed to the script and all the messages are displayed as per the document.write function. Blank space in the input box is also considered as a valid name by JavaScript prompt box.
Prompt Box Display with User Name
When the user clicks on the “Cancel” button then null value is passed and shown in the browser instead of the name.
Prompt Box Display with Null Value
Create Confirm Dialog Box Using JavaScript
This is a third type of dialog box provided in JavaScript besides a prompt and alert boxes. This section explains how to create confirm dialog box using JavaScript which is used to confirm the action taken by the user.
Confirm dialog box has the following features:
- A predetermined message to be displayed on the box
- Two buttons – OK and Cancel
How it Works?
Confirm box like other dialog boxes also stop the execution until the user response is received. User action can be either OK or Cancel.
- The value true is passed to the calling program when OK button is pressed
- The value false is passed to the calling program when Cancel button is pressed
Syntax
confirm (“Message”);
Example
confirm (“Do you want to close this window?”);
Practical Example
Following JavaScript code uses prompt method to ask a question to the user. A confirm box is displayed to show the answer is correct or wrong.
<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>
How it Looks?
Below is the picture of a prompt box in Chrome browser when the above code is executed and the confirm box is displayed based on the correctness of the answer provided in the prompt text box.
JavaScript Confirming Correct Answer
JavaScript Confirming Wrong Answer
Leave a Reply
Your email is safe with us.