jQuery Alert Dialogs Plug-in

October 2, 2010

3 comments

jQuery Alert Dialogs Plug-in

When you want to alert the user in the client side of a web application probably you are embarrassed jQuery Alert Dialogs Plug-in(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 exists 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 simulate 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 all the jQuery UI package like I did). After you downloaded all the relevant scripts you will have to add the plug-ins to your web application. Here is how my sample solution was ordered:
Sample Solution 
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 handle the confirmation in the callback function you supply.
  • jPrompt(message, [value, title, callback]) – creates a prompt alert which handle the value 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:

Prompt Output

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.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

3 comments

  1. Elijah ManorOctober 4, 2010 ב 14:46

    If your forms get anymore complicated you’ll probably just want to use the jQuery UI Dialog instead. Seeing that you have included all the jQuery UI widgets you are almost setup for it ;) other than the CSS file.

    You might consider putting your final code example on http://jsfiddle.net or http://jsbin.com so your readers can interact with your code (view, edit, execute, & share).

    Have a great week!

    Reply
  2. Gil FinkOctober 4, 2010 ב 15:49

    Thanks for the tip and the links for the sites Elijah.
    I’ll check the sites.

    Reply
  3. Felix LeungNovember 21, 2010 ב 19:03

    in this url:http://labs.abeautifulsite.net/projects/js/jquery/alerts/demo/

    it works well in ie8, but when I save the file in my computer and run it at ie8, when the Alert Dialog come out then the other content become blank, when i click ok the other content display again, why?

    Reply