JAvascript

JavaScript browser popups

JavaScript browser popups

When working with JavaScript in the browser there usually arises situations where user interactions. The browser provides 3 basic popups alert(), prompt(), confirm().

Alert box

An alert box is often used the present information to the user as a popup. The alert box is shown with an "OK" button which the user can click to proceed after reading the message. Script execution is paused until the user clicks "OK".

An alert box can be shown either by calling the window.alert() method or by calling it just as alert() without the window prefix.


<!DOCTYPE html>
<html>
  <head>
    <script>
    window.alert("Alert is a method of the global window object");
    alert("It can be used without the window reference");
    </script>
    
  </head>
  <body>
  <h1> Welcome to my homepage</h1>
  </body>
</html>

ALert

Alert



In the example above, the second alert() will be shown after the first window.alert() has been dealt with.

Prompt box

A prompt box is used to collect information from a user. The is shown a blank space for entering information along with "OK" and "Cancel" buttons to proceed after entering information.

If the user clicks "OK" the input information is captured and the window.prompt() returns that information. On the other hand if the user clicks "Cancel" the method returns null and the input is discarded.


Example:

<!DOCTYPE html>
<html>
  <head>
    <script>
    "use strict";
    
    let name = window.prompt("Enter your name: ");
    let surname = prompt("Enter your surname:");
    
    let fullname = name + " " + surname;
    alert("Welcome " + fullname + " to my website");
    
    </script>
    
  </head>
  <body>
  <h1> Welcome to my homepage</h1>
  </body>
</html>

Prompt

Prompt

Alert



The prompt() function accepts two arguments:

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

The second parameter is optional.

Confirm box

A confirm box is used to ask the user to verify or confirm something. It pops up with a message, "OK" and "Cancel" buttons. The window.confirm() function returns true if the user clicks "OK" and false if the user clicks "Cancel".


For example:

<!DOCTYPE html>
<html>
  <head>
    <script>
    "use strict";
 
    let ageCofirmation = confirm("Are you over 18 ?");
    
    alert(ageCofirmation);
    
    </script>
    
  </head>
  <body>
  <h1> Welcome to my homepage</h1>
  </body>
</html>

Confirm



Linebreaks in popups

Linebreaks are inserted in popup using the newline characters "\n".

For example:

<html>
  <head>
    <script>
    "use strict";
 
    let ageCofirmation = confirm("Are you over 18 ? \n If yes Cilck 'OK'. \n If no Click 'Cancel'");
    
    alert(ageCofirmation);
    
    </script>
    
  </head>
  <body>
  <h1> Welcome to my homepage</h1>
  </body>
</html>

Limitations of the browser popups

  • We have no control over the exact location of the popup. This is determined by the browser.
  • The exact look of the popup box depends on the browser.

Here is an example of how the confirm box shows in 2 different browser:

Confirm