jQuery Alert | How to use Alert box in jQuery with code and running example

jQuery Alerts

Alerts or dialogue boxes are widely used these days, in order to interact with the visitors of websites. For example, filling an online form or Alerting before exiting to another page. The jQuery provides ways to make fancy alert boxes to be used for a website.

Watch this alerts tutorial for quick idea

This chapter will take you through how you can use jQuery to design custom alert boxes that you can use for different purposes in your website.

The jquery.dialog.js plug-in

The jquery.dialog.js plug-in can be used for creating the simple, confirm and prompt alerts as the replacement of the default browser alerts.

For creating the jQuery alerts based on this plug-in, you need to include the JS and CSS files that come with this plug-in.

Demo1 Demo2 Demo3

Setting up the plug-in for creating alerts

Include the JS and CSS files after downloading the plug-in here.

<link rel=”stylesheet” href=”css/jquery.dialog/jquery.dialog.min.css”>

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

<script src=”js/jquery.dialog/jquery.dialog.min.js”></script>

Make sure including the JS file after the reference of the jQuery library. Also, adjust the path for referring the files according to your directory structure.

Use the JavaScript for triggering the required alert as shown in the demos below with complete code.

Developer page

A demo of simple alert

In this example, a simple alert is triggered as you click the text “Click here for simple alert”. The alert only displays a simple message and the user may close this by pressing the “Close” or any given text in the button. Have a look:

jQuery simple alert

See online demo and code

The script:

 

The simple markup:

 

The ID of the <a> tag is used in the script for triggering the simple alert. You may use a button or other element for triggering the alert.

A demo of prompt alert

The prompt alert can be displayed by using the prompt function that will replace the default prompt functionality. You may specify the text field like a password field for entering the value. After the value is entered, the user may press the button to proceed:

jQuery prompt alert

See online demo and code

The script:

 

You can see, by using different options, you may customize the prompt alert. For example, for replacing the text of the button from “proceed” to some other, use the button option. Similarly, use the message option for displaying the text for the prompt alert.

A demo of confirm alert

In this example a confirm alert by using jQuery is displayed. A user has two choices e.g. Agree or Don’t agree, Ok or Cancel, Yes or No etc. You may perform different actions depending on the user’s selection:

jQuery confirm alert

See online demo and code

The code:

Learn more about the available options by visiting the developer page.

In the following section, you can see another plug-in for creating the alerts based on jQuery.

You can see alert box codes below or download the required files to your computer and then copy HTML code to run it from your computer.

Download four dependency files here

You have to place all 4 files included in downloaded zip file to the same location as your code file is for below examples.

Example 1: Basic jQuery Alert Box

jQuery alert

Experience this example online

Example 2: Confirmation jQuery Alert Box

Experience this example online

 Example 3: Prompt Alert Box

This can be used for scenarios where you need user input values, for example, Your Name or age or location before proceeding to next step.

Experience this example online

Example 4: Including HTML elements into jQuery alerts

You can include HTML attributes like bold, italic, underline even links <a> into your alert boxes to make it more interactive and appealing. Below example shows how to include bold, italic underline and a hypertext <a> elements into jquery alert.

jQuery alert html

Experience this example online