Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

JQuery Message Box Plugin

, 6 Oct 2011 CPOL
Shows a simple implementation of JQuery UI based Message Box Dialog and Confirm Dialog
Article_demo.zip
code
css
ui-lightness
images
ui-bg_diagonals-thick_18_b81900_40x40.png
ui-bg_diagonals-thick_20_666666_40x40.png
ui-bg_flat_10_000000_40x100.png
ui-bg_glass_100_f6f6f6_1x400.png
ui-bg_glass_100_fdf5ce_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_gloss-wave_35_f6a828_500x100.png
ui-bg_highlight-soft_100_eeeeee_1x100.png
ui-bg_highlight-soft_75_ffe45c_1x100.png
ui-icons_222222_256x240.png
ui-icons_228ef1_256x240.png
ui-icons_ef8c08_256x240.png
ui-icons_ffd27a_256x240.png
ui-icons_ffffff_256x240.png
js
ConfirmDemo
ConfirmDemo
ConfirmDemo.suo
App_Data
bin
ConfirmDemo.dll
ConfirmDemo.pdb
ConfirmDemo.csproj.user
css
ui-lightness
images
ui-bg_diagonals-thick_18_b81900_40x40.png
ui-bg_diagonals-thick_20_666666_40x40.png
ui-bg_flat_10_000000_40x100.png
ui-bg_glass_100_f6f6f6_1x400.png
ui-bg_glass_100_fdf5ce_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_gloss-wave_35_f6a828_500x100.png
ui-bg_highlight-soft_100_eeeeee_1x100.png
ui-bg_highlight-soft_75_ffe45c_1x100.png
ui-icons_222222_256x240.png
ui-icons_228ef1_256x240.png
ui-icons_ef8c08_256x240.png
ui-icons_ffd27a_256x240.png
ui-icons_ffffff_256x240.png
js
Properties
//==========================================================================
//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)

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
Follow on   Twitter

| Advertise | Privacy | Mobile
Web02 | 2.8.141022.2 | Last Updated 6 Oct 2011
Article Copyright 2011 by Sazzad Hossain
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid