Click here to Skip to main content
11,649,522 members (77,638 online)
Click here to Skip to main content

JQuery Message Box Plugin

, 6 Oct 2011 CPOL 68.8K 4.5K 48
Rate this:
Please Sign up or sign in to vote.
Shows a simple implementation of JQuery UI based Message Box Dialog and Confirm Dialog
Article.PNG

Introduction

Sometimes, when working with JavaScript, we need to write a confirm dialog or message box to display some informative data. We can either use JavaScript alertfunction or confirmfunction for such operations. But in order to make a nice UI, we can resort to JQuery UI dialog, which gives a nice chrome window. But settings that up is not a one liner task. In this article, I will present a small plugin which will help us display some basic dialog just to get the job done without too much code.

Background

JQuery UI library is getting more and more popular for doing web 2.0 style user interface. The library provides a rich set of widgets and the Dialogcomponent is one of them. But to display a dialog, one would need to setup some divand the contentof the dialog. You can then call the dialogfunction display with a lot of optional options for customization.

Using the Code

The plugin is very simple and small, download the code block and make a reference to the scripts right after you have referenced the jquery lib and UI lib. Caution, without the UI lib, the plugin won't work.

(function($)
{
	$.msgBox = $.fn.msgBox = function(msg, onDialogClosed, customOpt, buttons)
	{
		.....
	};

	$.fn.msgBox.defaults =
	{

		height: 200,
		width: 400,
		title: "Message",
		modal: true,
		resizable: true,
		closeOnEscape: true
	};	

	$.fn.msgBox.confirm = function(msg, onConfirm, yesNo)
	{
		.....
	}

	$.fn.extend({ 
         
        //pass the options variable to the function
        confirmLink: function(options) {
			.....           
        }
    });

})(jQuery);

To use the plugin, first make a reference in the headsection:

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" 
rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>

To display a message box, simply call as follows:

$.msgBox("Hello World");

You can optionally specify the callback handler when the dialog is closed or custom title, etc.

$.msgBox("Hello World Demo with Custom Title", null, { title: "My Title" });

To display a confirmation dialog, use the following:

$.msgBox.confirm("Are you sure?",function(){
		alert("OK Clicked");
});

Now to something more useful, you use the confirmLinkmethod to hook up any links to auto display a confirm dialog. The anchor relattribute will be used by default to display the dialog text.

$("#confirmDemo2").confirmLink();
....
<a href="http://www.google.com" id="confirmDemo2" 
rel="Are you sure you want to visit google?">
	Click to display a confirm dialog (inline)</a>

For submit buttons, you could use the following:

$(".confirmButton").confirmLink();
....
<input type="submit" value="Submit" class="confirmButton" 
	rel="Are you sure you want to visit google?" />

Behind the Scenes

For those of you who want to understand how the plugin works, here is a little detail. To display the jquery UI dialog, you need a divsection to be declared in your page along with the dialog contents. Now every time on every page if we need to do that, it becomes tedious. So what the plugin does is to inject a hidden divat the end of BODYto be used with the dialog. It creates the divthe first time the function is called. Next time, it will reuse the div.

if (div.length == 0) {
    div = jQuery("<div id=\"msgBoxHiddenDiv\" title=\"Message\" 
	style=\"font-size: 10pt;display:none\"><p id=\"msgBoxHiddenDivMsg\" 
	style=\"font-size: 10pt; color: black; text-align: center\"></p></div>");
    div.appendTo(document.body);
    var dialogOpt = {
        bgiframe: true,
        autoOpen: false,
        height: opts.height,
        width: opts.width,
        modal: opts.modal,
        resizable: opts.resizable,
        closeOnEscape: opts.closeOnEscape,
        draggable: opts.draggable,
        buttons: $.fn.msgBox.defaultButtons
    };
    div.dialog(dialogOpt);
}

Points of Interest

Make sure you have referenced JQuery UI library. Most of the msgBoxfunctions take optional parameters if you need to customize.

You can probably extend the plugin in many ways, like UI lib detection, etc., and also there are a lot of alternatives out there. I just tried to keep it simple to be handy and useful.

History

  • V1 - Basic Message Box and Confirm Dialog functionality
  • V1.1 - Include support to handle INPUT nodes, and bug fix for Firefox. Included an ASP.NET web app demo in download

License

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

Share

About the Author

Sazzad Hossain
Binary Quest
Australia Australia
Sazzad is working as a developer since 2001 in the Realestate Market in Melbourne. Likes to work in C# and .Net platform. Started an ISV Business in 2008 called Binary Quest.

Follow me on Linked In

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 5 Pin
Girish Nama15-Mar-14 15:19
memberGirish Nama15-Mar-14 15:19 
QuestionJquery message box is not support in gridview control Pin
prassin19-Dec-12 20:42
memberprassin19-Dec-12 20:42 
GeneralMy vote of 5 Pin
Аslam Iqbal14-Oct-12 19:59
memberАslam Iqbal14-Oct-12 19:59 
GeneralMy vote of 5 Pin
asal_666-Jul-12 21:05
memberasal_666-Jul-12 21:05 
Questionclass css Pin
BeecoolStrass2-Apr-12 23:49
memberBeecoolStrass2-Apr-12 23:49 
AnswerRe: class css Pin
Sazzad Hossain11-Apr-12 18:23
memberSazzad Hossain11-Apr-12 18:23 
GeneralMy vote of 4 Pin
kaoruji22-Nov-11 22:01
memberkaoruji22-Nov-11 22:01 
thanks a lot! was looking for a simpler solution
BugSolution in ImageButton Pin
MGM.658621-Oct-11 23:33
memberMGM.658621-Oct-11 23:33 
GeneralRe: Solution in ImageButton Pin
Sazzad Hossain22-Oct-11 3:07
memberSazzad Hossain22-Oct-11 3:07 
GeneralMy vote of 5 Pin
MGM.658618-Oct-11 21:09
memberMGM.658618-Oct-11 21:09 
GeneralMy vote of 2 Pin
Munim Abdul6-Oct-11 21:15
memberMunim Abdul6-Oct-11 21:15 
GeneralRe: My vote of 2 Pin
Sazzad Hossain6-Oct-11 23:47
memberSazzad Hossain6-Oct-11 23:47 
GeneralRe: My vote of 2 Pin
Munim Abdul7-Oct-11 2:29
memberMunim Abdul7-Oct-11 2:29 
GeneralRe: My vote of 2 Pin
Sazzad Hossain7-Oct-11 2:49
memberSazzad Hossain7-Oct-11 2:49 
GeneralRe: My vote of 2 Pin
Munim Abdul7-Oct-11 4:13
memberMunim Abdul7-Oct-11 4:13 
GeneralMy vote of 3 Pin
Member 21280846-Oct-11 15:45
memberMember 21280846-Oct-11 15:45 
GeneralMy vote of 5 Pin
Md. Rashim uddin6-Oct-11 9:13
memberMd. Rashim uddin6-Oct-11 9:13 
Questionhow could this confirm cause post back? Pin
Longxe4-Oct-11 23:46
memberLongxe4-Oct-11 23:46 
AnswerRe: how could this confirm cause post back? Pin
Sazzad Hossain5-Oct-11 0:03
memberSazzad Hossain5-Oct-11 0:03 
GeneralRe: how could this confirm cause post back? Pin
Longxe5-Oct-11 16:40
memberLongxe5-Oct-11 16:40 
GeneralRe: how could this confirm cause post back? Pin
Sazzad Hossain5-Oct-11 21:31
memberSazzad Hossain5-Oct-11 21:31 
QuestionI don't get why you are wrapping a existing JQuery extension that is already fine to use Pin
Sacha Barber4-Oct-11 4:24
mvpSacha Barber4-Oct-11 4:24 
GeneralMy vote of 3 Pin
Petr Pechovic4-Oct-11 4:23
memberPetr Pechovic4-Oct-11 4:23 
GeneralRe: My vote of 3 Pin
Sazzad Hossain4-Oct-11 5:10
memberSazzad Hossain4-Oct-11 5:10 
GeneralMy vote of 4 Pin
kiran dangar4-Oct-11 3:25
memberkiran dangar4-Oct-11 3:25 
GeneralRe: My vote of 4 Pin
Sazzad Hossain4-Oct-11 4:03
memberSazzad Hossain4-Oct-11 4:03 
Questionthanks.... Pin
kaushal163-Oct-11 20:57
memberkaushal163-Oct-11 20:57 
GeneralMy vote of 5 Pin
kaushal163-Oct-11 20:55
memberkaushal163-Oct-11 20:55 
GeneralRe: My vote of 5 Pin
kiran dangar4-Oct-11 3:26
memberkiran dangar4-Oct-11 3:26 
QuestionCan i use this in dynamically Pin
Dorababu7433-Oct-11 19:40
memberDorababu7433-Oct-11 19:40 
AnswerRe: Can i use this in dynamically Pin
Sazzad Hossain3-Oct-11 20:37
memberSazzad Hossain3-Oct-11 20:37 
GeneralRe: Can i use this in dynamically Pin
Dorababu7433-Oct-11 20:40
memberDorababu7433-Oct-11 20:40 
GeneralRe: Can i use this in dynamically Pin
Sazzad Hossain3-Oct-11 21:27
memberSazzad Hossain3-Oct-11 21:27 
AnswerRe: Can i use this in dynamically Pin
Mahdi 821610214-Oct-11 18:56
memberMahdi 821610214-Oct-11 18:56 
GeneralRe: Can i use this in dynamically Pin
Sazzad Hossain4-Oct-11 20:54
memberSazzad Hossain4-Oct-11 20:54 
GeneralRe: Can i use this in dynamically Pin
Mahdi 821610214-Oct-11 22:49
memberMahdi 821610214-Oct-11 22:49 
GeneralRe: Can i use this in dynamically Pin
Mahdi 821610214-Oct-11 22:49
memberMahdi 821610214-Oct-11 22:49 
GeneralRe: Can i use this in dynamically Pin
Sazzad Hossain5-Oct-11 0:14
memberSazzad Hossain5-Oct-11 0:14 
GeneralRe: Can i use this in dynamically Pin
Mahdi 821610215-Oct-11 19:53
memberMahdi 821610215-Oct-11 19:53 

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
Web03 | 2.8.150804.4 | Last Updated 6 Oct 2011
Article Copyright 2011 by Sazzad Hossain
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid