Beautiful jQuery alerts with 12 demos by using different plug-ins

The alerts in jQuery

The jQuery is a JavaScript library so you can use simple JavaScript alerts while using the jQuery in your web projects. The simple alerts take the browser’s default style that looks simple.

Have a look at this simple alert which is created inside the jQuery code:

jQuery alert basic

See online demo and code

Creating a simple alert in jQuery code is simple, e.g.:

 

However, you can see it is simple and old-fashioned. You may use it for debugging purpose as a web developer, however, my focus is user end in this tutorial.

Although jQuery does not have a built-in alert component to create modal alerts, you can use plug-ins quite easily to create beautiful jQuery alert box in your web pages.

I will show you using two different plug-ins for creating different alerts, for example, a basic alert with the simple message and Ok button. The confirmation and prompt alerts. You can also see an example of alert with HTML elements like a link inside it, so keep reading!

By using jAlert plug-in

The jAlert enables you to create alerts with a variety of options for different types of alerts. For example, a simple or confirmation alert with the animation using different colors of buttons to close the alert.

This plug-in is compatible with the latest versions of jQuery as well.

See the demos with different options.

A simple alert demo by using jAlert

In this demo, A simple jQuery alert is created with an Ok button to close the alert box.

jQuery alert jAlert basic

See online demo and code

The following code is used in the jQuery section:

 

The color of the alert is set by using the theme variable. You may use different colors for various contexts. For example, the bluish theme may represent an informative message like I used in the above demo.

You may use red for dangerous action or green for success. You may also use yellow or black colors in theme parameter.

Similarly, you can set the title of an alert box in the title parameter. The content parameter is where you can write the message to display. I used the “white’ background for this demo. You may use black as well.

A demo to close alert by clicking anywhere

If you want to let a user close this jQuery alert by clicking anywhere on the screen rather clicking the “Ok” button, as shown in the above demo, then use this option:

 

Remove the button code from the above demo. See this demo with different theme:

See online demo and code

The following code is used this time:

 

You can see the options used in above code.

A confirm alert demo

The following example demonstrates how you can create a confirm jQuery alert by using the jAlert plug-in. As you click the button, the confirm alert will be shown with custom text message along with “Yes” and “No” buttons.

Upon clicking the Yes or No button, another alert will be displayed which is a simple alert to confirm the action.

See the code and demo by clicking the following link:

jQuery alert confirm

See online demo and code

This is how a confirm alert was created in the demo:

 

Changing the theme of confirm dialog box

You can also customize the look of the confirm alerts as using the jAlert plug-in. In this demo, I will create a jQuery confirm dialog with the red theme.

As you click the Yes or No buttons, rather displaying the simple alert like in above example, I will show jAlerts with different themes and styles.

See the demo online:

22.0_4-jQuery-alert-confirm-dialog

See online demo and code

You can see, if Yes button was clicked, another dialog displayed with different settings like the red theme, black background and you can close that dialog by clicking anywhere in the screen.

On the other hand, if you clicked No, the alert with the green theme, white background, and an Ok button to close that dialog appeared.

This code was used to create confirm jQuery dialog:

 

In the demo, the alert is called at the click event of the button. You may use a link or some other element to display that.

Changing the button text for confirmation dialog

In above examples, I only used the default button: Yes and No in the confirm alert. In pro sites, you may also need to change the text to, for example, Yes and Cancel or any other.

See the following demo with different button’s text:

jQuery alert confirm buttons

See online demo and code

This is how the button text is changed in the <script> section for the confirm box:

 

Also, I used the title for this confirmation demo:

 

 

Rest is the same, as used in the above demo.

Changing the close button demo

You can also specify the close button in different alerts of jQuery alert. See the following alert with the red circle.

jQuery alert confirm close

See online demo and code

Following line of code is used, in addition to above example’s code:

 

jQuery animated alerts demo

The animation can also be added to different alerts by using the jAlert plug-in. See the following demo, where an alert will be triggered as you click the button with ‘bounceIn’ effect.

jQuery alert confirm animations

See online demo and code

You can see three different animations for three alerts. The animation is added by using this code:

For example,  the confirm alert is given:

 

Setting up jAlert plugin

Enough of online demos, this is how you may set up this cool plug-in for your web project. Simply include the plug-in libraries in the <head> section:

<script src=”//code.jquery.com/jquery-1.11.3.min.js”></script>

<script src=”alert/jAlert-v3.min.js”></script>
<link rel=”stylesheet” href=”alert/jAlert-v3.css” />

The first one is the jQuery library while the second is the JS file of jAlert version 3. You may download and host it at your own by going to plug-in’s site (see the credit link below) or right click on any demo page, view source and find this line: <script src=”alert/jAlert-v3.min.js”></script>.

Click on the link to open the JS file. After that, right click and save it at your computer.

The same is applied to the third file, which is a CSS file.

For creating confirm alert, also, include this file in the head section:

<script src=”alert/jAlert-functions.min.js”></script>

Credits: The plug-in site @ GitHub

jQuery alerts by using another plug-in

If you are using 1.8.3 or lower version of jQuery, then you may use this plug-in to create different types of alerts including alerts with HTML and prompt alerts.

First, have a look at a demo online which is followed by how you can set up this plug-in to work in your projects.

A simple alert demo

Following is a simple alert with a message and an Ok button to close the alert. This is modal alert, so you cannot interact with other parts of the website until you close the alert.

22.0_8-jQuery-alert-simple

See online demo and code

This code is used to create a simple alert that also uses jAlert keyword:

 

However, this is a different plug-in. To set up this plug-in, you have to include following in the <head> section:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>

<script src=”//code.jquery.com/ui/1.11.2/jquery-ui.js”></script>

 

<script src=”alert/jquery.alerts.js” type=”text/javascript”></script>

<link href=”alert/jquery.alerts.css” rel=”stylesheet” type=”text/css” media=”screen” />

The first two libraries are jQuery libraries that are referred from the CDN.

You also have to include the jquery.alerts.js file that you may get by right clicking the demo page, view source and download the library or visit the plug-in page.

The last file is the CSS, that defines the look of alerts. You may find it the same way and download at your system or visit above link and download zipped file that contains all dependency files.

A prompt alert demo

A jQuery prompt alert that takes an input from the user can be created by using the jPrompt keyword. See the demo online:

jQuery prompt alert

See online demo and code

This is how a prompt jQuery alert is created in the demo:

 

So, you may specify the title, message, default text in the input field in that alert. The input text is retrieved by using the retvalue parameter (you may use any other). If some text is entered, it is shown by using a simple alert.

A confirm alert demo

Similarly, you may create a confirm alert by using the jConfirm word as shown in the following demo:

jQuery confirm alert

See online demo and code

Following jQuery code is used to create a confirm alert:

 

For each response, you may perform the desired action, e.g. connecting with a database to remove the account or placing the redirection code if asking the user to redirect to another website.

An alert with HTML

You may also use this plug-in to create an alert with HTML tags like hyperlinks, bold text, headings etc. See the following demo online with code:

jQuery html alert

See online demo and code

You can see, an alert with a link, bold text and even an image is created by using this plug-in. The following code is used to create that HTML alert:

 

Changing the colors or theme of alerts

By modifying the CSS file included with this plug-in, you can change the theme of different alerts quite easily. The other way can be overriding these classes by your own CSS.

In this demo, I will show you overriding the default CSS with custom CSS for creating an alert.

22.0_12-jQuery-alert-customized

See online demo and code

In the demo, I just picked two CSS classes and changed the properties for title and content area:

 

Similarly, you can change the other properties for different alerts including icons used in the alerts.