jQuery.msgBox


$.msgBox({
    title: "Are You Sure",
    content: "Would you like a cup of coffee?",
    type: "confirm",
    buttons: [{ value: "Yes" }, { value: "No" }, { value: "Cancel"}],
    success: function (result) {
        if (result == "Yes") {
            alert("One cup of coffee coming right up!");
        }
    }
});


$.msgBox({
    title: "Ooops",
    content: "Ohh dear! You broke it!!!",
    type: "error",
    buttons: [{ value: "Ok" }],
    afterShow: function (result) { alert("Message has been shown!"); }
});


$.msgBox({
    title: "Ooops",
    content: "Ohh dear! You broke it!!!",
    type: "error",
    beforeClose: function () { alert("Message will be closed!"); },
    showButtons:false,
    opacity:0.9
});


$.msgBox({
    title: "Ooops",
    content: "Ohh dear! You broke it!!!",
    type: "error",
    showButtons: false,
    opacity: 0.9,
    autoClose:true
});


$.msgBox({ type: "prompt",
    title: "Log In",
    inputs: [
    { header: "User Name", type: "text", name: "userName" },
    { header: "Password", type: "password", name: "password" },
    { header: "Remember me", type: "checkbox", name: "rememberMe", value: "theValue" }],
    buttons: [
    { value: "Login" }, {value:"Cancel"}],
    success: function (result, values) {
        var v = result + " has been clicked\n";
        $(values).each(function (index, input) {
            v += input.name + " : " + input.value + 
            (input.checked != null ? (" - checked: " + input.checked) : "") + "\n";
        });
        alert(v);
    }
});

Explanations

jQuery.msgBox is a plug-in to make smarter displaying messages. Also usage of the plug-in is so easy. You just need to add following files to your page as shown below and the images named 'alert.png', 'confirm.png', 'error.png', 'info.png', 'msgBoxBackGround.png' used by plug-in to 'Images' folder in the root directory. That's all!

Source

Alternatives

Options

Once you have linked/added these tree required files to your page, you can call 'jQuery.msgBox()' function with following options.

Option	Confirmable Values	Description
content	any string	the message text. as default:'Message'
title	any string	the title of the message as default:'Warning'
type	'alert','confirm','error','info','prompt'	type of the message will be shown. as default:'alert'
autoClose	boolean values	true for activating auto-closing, else false. as default:false
timeOut	milliseconds	auto-close timeout. as default:content.length * 70
showButtons	boolean values	true for displaying buttons on message, else false. as default:true
buttons	array	format:[{value:"Button1"},{value:"Button2"}]. as default:[{value:"Ok"}]
success	callback	a callback function that passed the value of the button has been clicked.
beforeShow	callback	a callback before message shown.
afterShow	callback	a callback after message shown.
beforeClose	callback	a callback before message closed.
afterClose	callback	a callback after message closed.
opacity	a value 1 between 0	the css property of the back panel of message box. as default:0.1

Examples

Explanations

Source

Alternatives

Options