Tutorials Tonight's Logo

WINDOW POP UPS


In javascript, there are 3 different kinds of pop up all 3 have different purposes :

  1. Alert Box
  2. Prompt Box
  3. Confirm Box

Note: A When a dialogue box appears the javascript stops execution of code below the box code until box is closed.

Pop Up Windows

Popups in javascript are used to interact with users either by displaying some data or by taking some kind of input from the user.

The way these three popup windows look is determined by different kinds of browser. These boxes can't be modified by CSS.

Lets see all three types of popups and their use.

Alert Box In Javascript

The alert box displays small messages. It contains one OK button.

To create an alert box use alert() method, it is a global method. Execution of javascript code below alert code is stopped until the OK button is clicked.

The following example shows how to display messages using an alert box.

<button onclick="alertBox()">Get Alert</button>

<script>
  function alertBox(){
    alert("This is a direct string alert message");
    var message = "This is variable string";
    alert(message);
  }
</script>
▶ Run the code

Confirm Box In Javascript

The confirm box is used to interact with users. It takes input from the user in form of confirmation, whether a task should be performed or not.

The confirm box is created by window.confirm() method. It is a global method so it can be used without referring to the window interface.

The confirm box is similar an alert box but it can return boolean value, which is used to know what was the action taken by the user for the confirmation.

The confirm box contains two buttons, one is the OK button which returns true other is cancel button which returns false. It also displays a message which is passed in the confirm() method as an argument.

function deleteFile() {
  var del = confirm("Do you want to delete the file?");
  if (del) {
    document.write("File Deleted!");
  }
  else {
    document.write("File Not Deleted!");
  }
}
▶ Run the code

Prompt Box In Javascript

The prompt box is another popup box in javascript which allows the user to take input in form of string.

The prompt box is created using window.prompt() method. Since it is a global method so it is accessible everywhere and can be used without referring to the window interface.

The prompt box contains an OK button which returns input value in the form of string.

The following example will take two inputs from the user and will print their sum.

<button onclick="sum()">Take Input And Add</button>

<script>
  function sum() {
    var num1 = prompt("Enter 1st number:"); // taking input
    var num2 = prompt("Enter 2nd number:"); // taking input
    num1 = parseInt(num1); // String to integer
    num2 = parseInt(num2);
    var sum = num1 + num2;
    document.getElementById("sum").innerHTML = "Sum = " + sum;
  }
</script>
▶ Run the code

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.