jQuery Alert Dialogs Plug-in

Gil Fink

Rate me:

4.50/5 (4 votes)

2 Oct 2010CPOL2 min read

65.7K

jQuery Alert Dialogs Plug-in

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:

XML

<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:

JavaScript

<%@ 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.

CodeProject

This article was originally posted at http://feeds.feedburner.com/GilFinkBlog

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Gil Fink

Technical Lead sparXys

Israel

Gil Fink is a web development expert and ASP.Net/IIS Microsoft MVP. He is the founder and owner of sparXys. He is currently consulting for various enterprises and companies, where he helps to develop Web and RIA-based solutions. He conducts lectures and workshops for individuals and enterprises who want to specialize in infrastructure and web development. He is also co-author of several Microsoft Official Courses (MOCs) and training kits, co-author of "Pro Single Page Application Development" book (Apress) and the founder of Front-End.IL Meetup. You can read his publications at his website: http://www.gilfink.net

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

jQuery Alert Dialogs Plug-in

Introduction

jQuery Alert Dialogs Plug-in

How to Use the Plug-in?

Summary

License

Comments and Discussions