How many times have you used alert popup in your JavaScript code?

Most of the web developer’s answer would just less than infinite. This is the most used keyword and become rescue tool when we stay late at office to resolve a silly JavaScript issue. Alert prompts user a popup with some information. Earlier it was also used heavily for showing validation error messages.

But do you know what all are other popup options available with JavaScript?

These are in total three as below

Let’s discuss one by one

Alert

It is the simplest one and most widely used to show some message to user in one way. Once the message on browser, it shows OK button which is required to be pressed before moving further as

Syntax

Syntax is pretty simple

   alert("Your meesage to user");

Confirm

This is another important  message box which instead of just showing a message to user, it also accepts the user’s response. It is used to take a Boolean response (true/false) from the user. When displays it show two buttons Ok and Cancel. Ok return true and Cancel returns false. Lets see it

Syntax

    if(confirm("Do you want to proceed"))
    {
        // Proceed further
    }
    else
    {
        // Stop 
    }

Prompt

This is another popup message box which is used least. But this can be very helpful in certain scenarios. This allows to take some input from the user. When it is shown to user, it provides an input box in popup where user can enter some text with OK and Cancel button. If OK is pressed then the entered value is passed to the backend else it returns null. It also allows us provide a default value in text box.

Syntax

    var enteredSocialMedia = prompt("Which social media site you use most", "Twitter")
    if (enteredSocialMedia == null)
    {
        alert("No worries!! You can save your preference any time");
    }
    else
    {
        alert("We have saved your preference");
    }

I have used Internet Explorer for this example and if you have used alert or any of them with earlier version of IE like IE 6/7, its looks much better now. It looks different on different browser because its the browser which shows its own popup. Although in most of the cases, we don’t use these popup due to its limitation and look n feel but can help in many scenarios and suitable for small applications.

Cheers,
Brij