JavaScript Tutorial & Demo 5: JavaScript Message Box: alert(), confirm(), prompt() : The ES6 Dialog Boxes

JavaScript Message Box: JavaScript has global functions for showing messages to users for various reasons, such as displaying an introductory message, displaying a message and requesting confirmation from the user, or displaying a popup to obtain the user’s input value. Because we’ll be utilizing the browser as our demonstration environment, let’s look at several user-interaction functions: alert, prompt, and confirm. They’re also known as ES6 Dialog boxes.

JavaScript Message Box: Alert Box

An alert dialog box is often used to provide users with a cautionary message. An alert box is used to access the user’s information, interfering with the user’s activity, and this is why you must use caution when using it.

A modal window is a name given to the mini-window that contains the message. The term “modal” refers to the fact that the visitor cannot interact with the remainder of the website, such as pressing other buttons, until they have dealt with the window. In this situation, until they hit the “OK” button.

Demo Syntax

alert(message)

OR

Windows.alert(< “message to be displayed”>);

Demo Example 1: Simple Alert Message using JavaScript

alert("This is an alert.");

Demo Example 2:  Passing a simple JavaScript Statement in alert dialog box

alert(1+2);

Demo Example 3: Using alert by assigning a JavaScript function

<html>
<body>
<h2>JavaScript Alert</h2>
<button onclick="FunctionAL()">I'm Button</button>
<script>
function FunctionAL() {
 alert("I am an alert box!");
}
</script>
</body>
</html>

Demo Example 4: Line Breaker

<!DOCTYPE html>
<html>
<body>
 <p>Line Breaker</p>
 <button onclick="alert('Eval\nJavaScript')">I’m Button</button>
 </body>
</html>

JavaScript Message Box: Confirm Box

Confirmation Dialog Boxes are commonly used to solicit users’ opinions on a given choice, and it is used to request confirmation from the user. This dialog is quite simple; you cannot change the symbol or title of the dialog box, and you can display a message asking the user to agree. There are two OK and Cancel buttons in this dialog window.

If the user presses the OK button, the function confirm() returns true. However, if the user presses the cancel button, the confirm() function returns false. A confirmation dialog box is typically used to obtain the user’s approval for any option.

Demo Syntax

confirm(message); 

OR

window.confirm("text");

OR

result = confirm(question);

Demo Example 1: Simple JavaScript using Confirm Dialog Box

if (confirm("Press a button!")) {
  txt = "OK!";
} else {
  txt = "Cancel!";
}

Demo Example 2: Deleting a file Popup message using JavaScript Function and Confirm Dialog Box

<!DOCTYPE html>
<html>
   <head>
      <title>File Delete Option</title>
      <script type="text/javascript">
         function DelCon()  {
              var ans = confirm("Do you want to Delete the file?");
              if(ans)  {
                  alert("File is Deleted.");
              } else {
                  alert("Action Terminated.");
              }
         }
      </script>
   </head>
   <body>
      <h2>File Delete Option</h2>
      <button onclick="DelCon()">I'm a Button</button>
   </body>
</html>

Demo Example 3: Continue or not using JavaScript by creating a function and confirm dialog box

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function confirmnow ()
{
var con = confirm("Do you want to continue ?");
if(con == true )
{
document.write (" CONTINUE!");
return true;
}
else
{
document.write("NOT CONTINUE!");
return false;
}
}
</script>
</head>
<body>
<p>Click Here! </p>
<form>
<input type="button" value="Click Here!" onclick="confirmnow();" />
</form>
</body>
</html>

Demo Example 4: Using JavaScript Confirm Dialog box for re-verification of entered mobile number.

<html>
<head>
 <title>Display confrim box</title>
</head>
 <body>
<h2>Confirm Box to re-verify Mobile number</h2>
 <script>
confirm("Please re-verify the mobile number.");
 </script>
</body>
</html>

JavaScript Message Box: Prompt Box

When it is necessary to display a text box for user input, the prompt dialog box is utilized. As a result, it allows for interaction with the user. The function prompt accepts two parameters, and it has a Text Field where users may submit information.

This dialog box is produced using the prompt() function, which requires two parameters: a label to show in the text box and (ii) a default string to display in the text box. There are two buttons in this dialog box: OK and Cancel. If the user presses the OK button, the window method prompt() returns the value entered in the text field. The window method prompt() returns null if the user hits the Cancel button.

Demo Syntax

prompt([string message], [string defaultValue]);

OR

window.prompt("sometext","defaultText");

Demo Example 1: Simple JavaScript Prompt Box for inputting name of a user

<html>
<head>
 <title>Prompt dialog box</title>
</head>
 <body>
<h2>Prompt Dialog Box to accept Input </h2>
 <script>
prompt("Please Enter Your Name","Eval");
 </script>
</body>
</html>

Demo Example 2: Simple JavaScript Prompt Box for taking input from a user by creating a function

<button type="button" onclick="promptFx()">Click Here!</button>
<script>
function promptFx() {
    var InTxt = prompt("Write text here:", "");
if (InTxt != null) {
    if (InTxt != "") {
        document.getElementById("InTxtStr").innerHTML = "You wrote " + InTxt + " in the field!";
    } else {
        document.getElementById("InTxtStr").innerHTML = "You didn't write anything in the field!";
    }}
else {
        document.getElementById("InTxtStr").innerHTML = "";
    }
}
</script>
<div ID="InTxtStr"> </div>

Demo Example 3: Inputting and showing age using JavaScript Prompt dialog box

<!DOCTYPE html>
<html>
   <head>
      <title>Show Your Age</title>
      <script type="text/javascript">
         function promptFx()  {
              var age = prompt("Enter you age:", "0");
              if(age != null)  {
                  alert("Your age is " + age);
              }
         }
      </script>
   </head>
   <body>
      <h2>Prompt Dialog Box</h2>
      <button onclick="promptFx()">Click!</button>
   </body>
</html>

Conclusion

We discussed three browser-specific functions for interacting with visitors:

JavaScript Dialog BoxFunction
JavaScript Alert BoxDisplays a message
JavaScript Confirm BoxDisplays a message and waits for the user to hit the “OK” or “Cancel” button. It returns true if the condition is OK and false if it is Cancel/Esc.
JavaScript Prompt BoxDisplays a message prompting the user to enter text. It returns the text or, if the Cancel or Esc buttons are used, null.
JavaScript ES6 Dialog Boxes in a go

These techniques are modal as they suspend script execution and prevent the visitor from interacting with the rest of the page until the window is closed.

All of the approaches discussed above have two drawbacks in common:

  • The browser determines the exact placement of the modal window, and it’s usually in the center.
  • The browser also determines the actual appearance of the window, and we can’t change it.

Other techniques for displaying better windows and fuller interaction with visitors exist. Still, they are considerably more sophisticated, and these approaches are far more accessible and much faster than other methods.

Article Category: JavaScript Tutorials

More JavaScript Tutorials

Leave a Comment