Select Page

Creating Javascript Popups

Posted on May 19, 2017
James Quick, Social Developer

Popups are a very common way to get some sort of feedback from users.  Whether you want the user to acknowledge a message, confirm a decision, or provide some sort of input, you can find a solution using built in functionality in Javascript.  Although it might be common for more experienced developers and designers to build their own version of these popups, I think it’s a good idea to take a look at what already exists.

Alert()

One of the first things people often come across in Javascript demos is the use of alert().  Alert simply pops up a message to the user that won’t go away until the user acknowledges it by clicking ok.  Because of this, it serves as a great way when to make sure that the user has gotten the message.  This alert function takes a string parameter that becomes the text displayed in the alert.

In the example on W3 School the, the alert is triggered when clicking a button.  Notice the string passed into the function call is the one displayed.

Confirm()

Alert works for simply displaying a message to the user, but what if you need the user to confirm an action they made on your site?  Let’s say, for example, that you want the user to confirm whether or not they want to delete an item after clicking the delete icon?  This is a good habit because we don’t want the user to accidentally click delete and never be able to undo that mistake.

For this scenario, Javascript has you covered again using the confirm() function.  It works just the same as alert() above.  It takes in a string parameter that then gets displayed to the user.  The difference is that instead of the user just clicking ok to dismiss the popup, this time they need to make a decision “ok” or “cancel”.  Here’s the confirm example on W3 Schools.

There’s one more piece that we need to understand though.  In the above example, we have no idea to know which option the user chose.  To do so, we can check the return value of the confirm() function.  As you might expect, the method returns true if the user chooses “ok” and returns false if the user chooses “cancel”.  Based on that return value, you can proceed to deleting the item or not.  In the example below, I pop up an alert displaying the users choice.

Prompt()

The last type of popup Javascript provides, prompt(), takes text input from the user,  You only get access to one text field for the user to type in.  This can be useful for asking the user for a search term, a todo list, etc.  Again, just like the first two in takes a string parameter that gets displayed to the user.  What differs with prompt() is the fact that it can take a second parameter that becomes the default value in the text.  If you don’t pass the second parameter, the text box is empty by default.  Here’s the example on W3.

In general, I would say that these built in pop ups aren’t used too often in modern web applications created by experienced developers.  They aren’t exactly styled beautifully and may not provide the necessary functionality depending on what you’re looking for.  There are more customizable options in JQuery for example that might be of interest, so if you need more, have a look around.  However, for beginner web developers and for prototypes these functions become fairly useful.

Subscribe

Subscribe

Javascript. Node. Angular. Bootstrap. Wordpress. You name it.  If you are a current or aspiring web developer looking to learn more, then subscribe!  I will share the latest news and tutorials as well as exclusive assets.

Thank you for subscribing!

Pin It on Pinterest

Share This

Share this post with your friends!