By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

JavaScript Popup Boxes

How to create popup boxes in JavaScript, and act upon choices made by users in these small dialogs.

Edited: 2012-02-25 16:37

What people commonly refer to as JavaScript popup boxes, are really just small dialogs created by JavaScript functions, such as alert, confirm and prompt. The default look and feel of these boxes can not be changed, their look depends entirely on the Browser and operating system. These popup boxes are mainly useful when outputting script errors, or if you don't really care about how the boxes themselves look.

There are 3 types of pupup boxes, created by each their own JavaScript Function. Below are some examples that you can click on, you will finally find the source required later on this page.

alert
confirm();
prompt();

And don't worry, nothing will happen when you interact with these dialogs.

JavaScript popup boxes example

The first example deals with the confirm box, and how to act upon the choice that was made by the user. For simplicity we will use the onclick event in this tutorial.

<button onclick="alert('Hay dude, welcome to Brugbarts JavaScript Tutorial!');">JavaScript Alert Box</button>
<button onclick="confirm('Are you absolutely sure that you want to leave this page now?');">JavaScript Confirm Box</button>
<button onclick="prompt('Please provide the URL of the website that you want to post','http://');">JavaScript Alert Box</button>

To make the confirm box actually do something, depending on what the user entered, we simply create a user-made function, assign it to a JavaScript Variable, and then call this function on our onclick event.

function askabout() {
 var answer = confirm("Do you like me?");
if (answer) {
    alert("Well, thanks i guess.");
  } else {
    alert("Why not? No wait, i dont care.");
  }
}

The required HTML for the above example:

<button onclick="askabout();">JavaScript Confirm Box</button>