Introduction
When you want to alert the user in the client side of a web application, probably you are embarrassed 
(or you don't give a damn) when you use JavaScript built-in alerts. I know I do. JavaScript built-in alerts are very ugly IMHO and therefore I try to use alternatives instead. In this post, I'll show a very useful alternative that I've been using lately in more then one project – the jQuery Alert Dialogs plug-in.
jQuery Alert Dialogs Plug-in
One of the benefits of using jQuery is the amount of jQuery plug-ins that exist in jQuery eco-system. But the amount of plug-ins also makes it very difficult to find your desired plug-in for each behavior you need. One of the plug-ins I'm using frequently is the jQuery Alert Dialogs. The plug-in “aims to replace the basic functionality provided by the standard JavaScript alert(), confirm(), and prompt() functions”. The plug-in also simulates the use of these standard functions and also gives you the power to create your own style.
How to Use the Plug-in?
First, you will have to download the plug-in from this link – jQuery Alert Dialogs. Also you will have to download jQuery UI Draggable plug-in which the plug-in has dependency on it (or download the entire jQuery UI package like I did). After you download all the relevant scripts, you will have to add the plug-ins to your web application. Here is how my sample solution was ordered:
In the default page, I've added the following links in the head section:
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.alerts.js" type="text/javascript"></script>
<link href="Content/Style/jquery.alerts.css" rel="stylesheet" type="text/css" />
</head>
Now, you will be able to use the plug-in included methods:
jAlert(message, [title, callback]) – creates an alert. jConfirm(message, [title, callback]) – creates a confirm alert which handles the confirmation in the callback function you supply. jPrompt(message, [value, title, callback]) – creates a prompt alert which handles the value of the user type in the callback function you supply.
The following example shows how to use the alert and prompt:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Defualt.aspx.cs"
Inherits="WebApplication6.Defualt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.alerts.js" type="text/javascript"></script>
<link href="Content/Style/jquery.alerts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$("#btnAlert").click(function () {
jAlert('Pushed the alert button', 'Alert Dialog');
});
$("#btnPrompt").click(function () {
jPrompt('Type some value:', '', 'Prompt Dialog', function (typedValue) {
if (typedValue) {
jAlert('You typed the following ' + typedValue);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="Alert Me" id="btnAlert" />
<input type="button" value="Prompt Me" id="btnPrompt" />
</div>
</form>
</body>
</html>
and the output of pushing the prompt button:
Summary
The jQuery Alert Dialogs plug-in is a very useful plug-in. Avoid using the built-in alerts and start using a more styled and beautiful alerts. If the supplied style isn't good for your needs, then customize it and make it more suitable.
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Rant 
Admin