Click here to Skip to main content
15,881,882 members
Articles / Programming Languages / Javascript

JQuery Message Box Plugin

Rate me:
Please Sign up or sign in to vote.
4.00/5 (21 votes)
6 Oct 2011CPOL2 min read 123.5K   4.9K   49  
Shows a simple implementation of JQuery UI based Message Box Dialog and Confirm Dialog
//==========================================================================
//MessageBox Dialog Library
//using JQuery UI Dialog Library
//Written By: Sazzad Hossain, http://blog.sumon.net, @SazzadHossain
//Version 1.1, Bug fix for confirmLink function to handle INPUT and A types
//==========================================================================
(function($) {
    $.msgBox = $.fn.msgBox = function(msg, onDialogClosed, customOpt, buttons) {
        var id = "#msgBoxHiddenDiv";
        var div = $(id);

        var opts = $.extend({}, $.fn.msgBox.defaults, customOpt);
        var btns = {};
        $.fn.msgBox.callBack = onDialogClosed;

        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);

        }

        $(id + "Msg").html(msg);

        div.dialog("option", "title", opts.title);

        if (buttons != null) {
            for (i = 0; i < buttons.length; i++) {
                btns[buttons[i]] = function(e) {
                    if (onDialogClosed) {
                        onDialogClosed($(e.currentTarget).text());
                    }
                    $(this).dialog('close');
                }
            }
            div.dialog("option", "buttons", btns);
        }
        else {
            div.dialog("option", "buttons", $.fn.msgBox.defaultButtons);
        }

        div.dialog("open");
    };

    $.fn.msgBox.defaults =
	{

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

    $.fn.msgBox.defaultButtons =
	{
	    'OK': function() {
	        if ($.fn.msgBox.callBack) {
	            $.fn.msgBox.callBack(btnName);
	        }
	        $(this).dialog('close');
	    }
	}

    $.fn.msgBox.confirm = function(msg, onConfirm, yesNo) {
        var keys = ["Yes", "No"];
        if (yesNo == false) {
            keys = ["Ok", "Cancel"];
        }
        $.msgBox(msg, function(keyPressed) {
            if (keyPressed == "Ok" || keyPressed == "Yes") {
                onConfirm();
            };
        }, { title: "Confirm" }, keys);
    }

    $.fn.extend({

        //pass the options variable to the function
        confirmLink: function(options) {


            //Set the default values, use comma to separate the settings, example:
            var defaults = {
                msgFromRel: true,
                defaultMsg: 'Are you sure?'
            }

            var options = $.extend(defaults, options);

            return this.each(function() {

                var o = options;
                var msg = o.defaultMsg;
                var obj = $(this);

                if (o.msgFromRel) {
                    if (obj.attr("rel") != "") {
                        msg = obj.attr("rel");
                    }
                }

                obj.click(function(event) {

                    event.preventDefault();
                    $.msgBox.confirm(msg, function() {
                        if (event.target.tagName == "INPUT") {
                            $(event.target).closest("form").submit();
                        } else if (event.target.tagName == "A") {
                            window.location.href = $(event.target).attr("href");
                        }
                    });

                });

            });
        }
    });

})(jQuery);

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

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


Written By
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

Comments and Discussions