Home » JavaScript » Javascript Popup Example

About Era Balliu

Era Balliu
Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.

Javascript Popup Example

In many cases it is useful to add a popup to your page or website. In Javascript there are ready made methods to do that, or you can create popups manually. Take a look!
 
 
 
 
 
 
 
 
 

Methods for popping up boxes

In Javascript there are three kinds of popup boxes:

  • Alert boxes
  • Popup boxes
  • Confirm boxes

Let’s take a closer look at each one of them.

Alerts

We use alerts to make sure the user has understood some important information about your page. “OK” has to be clicked in order to continue.

It’s used like below:

alert("This is an alert about an important issue!!");

You will have something like this:

Alert Box using Javascript

Alert Box using Javascript

Confirm

Confirm boxes are used to get the users’ decision about something. That means that there are two buttons, one “OK” and one “Cancel”. The function returns true if the user clicks “OK” and false if the user clicks “Cancel”.

It is used like this:

var response = confirm("Do you want to leave this page?");
if (response == true) {
    alert("You might lose unsaved data!");
} else {
    alert("Glad that you stayed!");
}

Your confirm box will look like below:

Confirm Box using Javascript

Confirm Box using Javascript

Prompts

Prompt boxes are used when we need user’s input about something. One example is to ask for the user’s age before displaying sensitive information. The function returns the input or NULL in case no data is entered. After putting data in the input field, the user has to click “OK” or “Cancel” to continue.

You can put it to use like below:

var age = prompt("Please enter your age", "15+");
if ( age < 13 ) {
    document.getElementById("demo").innerHTML =
        "Please ask for permission from your parents or guardian before going on";
}

Here’s how your prompt box will look:

Prompt Box using Javascript

Prompt Box using Javascript

These are the three methods you can use to pop up a box.

Download the source code

This was an example of popups in Javascript.

Download
You can download the full source code of this example here: Popup
(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments