Click here to Skip to main content
11,813,974 members (63,596 online)
Click here to Skip to main content

Tagged as

jQuery Alert Dialogs Plug-in

, 2 Oct 2010 CPOL 46K 9
Rate this:
Please Sign up or sign in to vote.
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 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:

Sample Solution

In the default page, I've added the following links in the head section:

<head runat="server">
    <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" />

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" %>

and the output of pushing the prompt button:

Prompt Output


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.


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


About the Author

Gil Fink
Technical Lead sparXys
Israel 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:

You may also be interested in...

Comments and Discussions

GeneralOnBeforeUnload Pin
JFergulbops10-Oct-10 23:58
memberJFergulbops10-Oct-10 23:58 
GeneralRe: OnBeforeUnload Pin
Gil Fink11-Oct-10 21:33
memberGil Fink11-Oct-10 21:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.151002.1 | Last Updated 2 Oct 2010
Article Copyright 2010 by Gil Fink
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid