Hit enter after type your search item

Custom and fancy JavaScript prompt alerts

The prompt alert

The prompt alerts are those where you ask users to enter something before proceeding. The JavaScript prompt alert can be created by using:


The prompt keyword is followed by the text which is shown as a message and text in the textbox which is also visible to take the user input.

The above prompt JavaScript alert is quite simple that takes a browser’s default style. In many scenarios, this is desired to match the prompt dialogue design to the theme of the website.

I will show you creating simple prompt alerts as well as creating beautiful JavaScript plug-ins based alerts in this tutorial. You can change the look and feel of these alerts quite easily.

Let me start with a basic prompt alert by using the prompt keyword.

A basic prompt alert example

In this example, a simple prompt alert is created where a user is asked to enter the email address. If user enters the email and presses Ok, a simple alert will be shown with entered email address:

See the demo online:

JavaScript prompt simple

See online demo and code

Instead of showing the alert, you can perform some action like saving the email address or retrieving information from the database based at that email etc.

Following JS code is used to create that prompt alert:


The promptalert JS function is called at the click event of the button.

A demo to create fancy prompt alert by using alertify.js plug-in

As mentioned earlier, you can create fancy and beautiful looking prompt alerts by using third party plug-ins to match with the design of your website. One of the plug-ins that I am going to show you is alertify.js.

First, have a look at an example of this plug-in which is followed by how to set up and customizing its look and feel.

JavaScript prompt alertify

See online demo and code

After including the dependency files in the <head> section, following code is used in the <script> part just above the </body> tag:


You can see, the alert is initiated by using alertify.prompt which is followed by text to be displayed. If a user presses the OK button it will display a simple alert by using alertify.alert.

Setting up alertify.js plug-in

The plug-in requires a few dependency files in the <head> section:

    <script src=”alert/dist/alertify.min.js”></script>

<link rel=”stylesheet” href=”alert/dist/alertify.core.css” />

<link rel=”stylesheet” href=”alert/dist/alertify.default.css” id=”toggleCSS” />

You may get these from the GitHub website. Or download by viewing the “view source” in the demo page by opening these files and save it to your system

Among those files, alertify.default.css is the one that deals with the look of alert. If you want to change the look according to the theme of your website, then either modify this file or use your own with similar classes. See a demo below, how you can do it.

A demo to change the JavaScript based prompt alert (alertify.js)

For this demo, I am simply copying the alertify.default.css and renaming it to alertify.custom.css. You also need to change the name in the head section as well.

<link rel=”stylesheet” href=”alert/dist/alertify.custom.css” id=”toggleCSS” />

See a demo where I changed a few CSS properties to modify the look of the prompt dialog.

JavaScript prompt alertify custom

See online demo and code

You can see, the background color of the main area in the alert is changed. Also, the button’s font-size and font-family are also changed.

To accomplish that, open the alertify.custom.css file. The .alertify class specifies the background-color and font related properties along with border-radius.

Similarly, you may change the Ok and Cancel button properties by modifying its class properties.

You may also change the text of OK or Cancel buttons to Yes/No or as per need by modifying the alertify.min.js or alertify.js file (whichever you include in your project).

A demo of prompt JavaScript alert by using SweetAlert plug-in

There is another nice plug-in to create different types of alerts including prompt which is also based at JavaScript.

In this demo, I will show you how you can use this to create a prompt alert by using SweetAlert plug-in.

JavaScript prompt sweetalert

See online demo and code

Following code is used in the <script> section (you can see complete code in the demo page):


The alert is imitated as the promalert function is called at the click event of the button.

It used the swal keyword to trigger that alert, which is short-word for Sweet Alert.

The dependency files are included in the <head> section that you can download by “view source” the demo page and finding those links OR visit the GitHub website for this plug-in, which guide is written here (at the bottom part).

This div height required for enabling the sticky sidebar