Sunny Bahree: How To Create Fancy, Stylish Alert Dialog Box Using JQuery And How To Add Image In Alert Dialog Box

Introduction

In this post, I will demonstrate how to create alert dialog box which is fancy, stylish and have more control on what text to be displayed in its title and description. All in all, it will customized alert dialog box.

This alert box will be different from the regular browser alert box which I feel is little difficult to customize and make it look fancy.

Prerequisites

To create fancy and stylish alert dialog box, we will use:

JQuery - To refer JQuery in our script, we will use its library from JQuery CDN
JQuery UI - To refer JQuery UI in our script, we will its librar from JQuery UI CDN
Basic knowledge of JQuery/Javascript

Let's begin...

There are few things need to be noted when we refer JQuery UI in our script code.

Firstly, we have to refer JQuery UI's ".css" file in our script code which contains the theme we will be using to create alert dialog box. To that alert dialog box, we will provide it with the fancy and stylish looks.

Secondly, we have to refer JQuery UI's ".js" file in our script code which contains all the functions we will be using in our script to trigger the alert dialog box.

Let's deep dive more and discuss little bit more about the JQuery UI's ".css" file and ".js" file reference.

If you go to this location which has JQuery UI CDN page https://code.jquery.com/ui/, by the time I am writing this post, the JQuery UI CDN page shows content as shown in below screenshot.

You could in the below screenshot that by the time I am writing this post, this JQuery UI CDN page shows me first three top versions in its library.

The first i.e. jQuery UI - Git Builds is unstable and is not fit to use. And the second one i.e. jQuery UI 1.12 is "Pre-Release" so it is still not stable.

Hence, we will consider and use jQuery UI 1.11 version as it is stable version.

That means, we will be referring our ".js" file from jQuery UI 1.11 version.

If you notice just below Themes, we have plenty of them for e.g. 'black-tie', 'blitzer', 'cupertino' etc.

These are stable themes and hence we can use any one of these in our script code. These will be of ".css" file.

How to use it?

From JQuery UI CDN page, in this example, I will use ".css" file reference of "black-tie" theme and "minified.js" file reference of jQuery UI 1.11 library.

This is how we will provide the reference to all three files in our script code:

In the above lines of code, we could see, in the first line I am referencing to the ".css" file of "black-tie" theme available in JQuery UI CDN library.

In the second line, I am referencing to the latest ".js" file available in JQuery CDN by the time I am writing this post.

And, in the third line, I am referencing to the latest and stable ".js" file available in JQuery UI CDN library.

How to get the alert dialog box?

Once we are done with referencing of the mandatory files as shown above, we will use JQuery UI's in built function for dialog box i.e. .dialog() function as shown below:

$(document).ready(function () {

$("<div title='Alert'> This is sample alert!</div>").dialog();

});

</script>

In the above code, we are creating dynamic "div" element and assigning it with the "title" property.

Between the opening and closing "div" tag, we are providing the description and then calling it with the dialog function.

We can always change and assign any "title" and "description" for the "div" tag.

When we will execute the above code, we will get following alert message:

So, we can see how easy it is to get the fancy and stylish alert dialog box.

Let's try any other ".css" theme reference file available in JQuery UI CDN.

For e.g., in above code we have used "black-tie" theme, now if we will use theme as "blitzer", we will get following result:

So, instead of using this code -

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">

We have used this code -

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css">

In similar fashion, we can try other themes and opt for the best which suits us or our requirment.

How to add image to the alert dialog?

Let's say we want to add some image also in the alert dialog box.

Let's have below image and let's add it to the alert dialog box.

We can do the same by using below code:

$(document).ready(function () {

$("<div title='Alert'><img src='C:/Users/Desktop/alert-icon.png' style='width:40px;
height:40px; vertical-align:middle;'/> This is sample alert!</div>").dialog();

});

</script>

When will execute above script code, we will get following result.

In the above alert dialog box, we can see the image has been added and description text is right after it. We can place any of the elements in order accordingly to our needs.

Conclusion

In this post we have learnt how to create alert dialog box using JQuery. How to make alert dialog box fancy, stylish and use it with customization. Hope it helps!

Pages

Saturday, January 16, 2016

How To Create Fancy, Stylish Alert Dialog Box Using JQuery And How To Add Image In Alert Dialog Box