jQuery MessageBox

buttonDone          : "OK"         // String / Object / Boolean
buttonFail          : undefined    // String / Object / Boolean
buttonsOrder        : "done fail"  // String
customClass         : ""           // String
customOverlayClass  : ""           // String
filterDone          : undefined    // Function
filterFail          : undefined    // Function
input               : false        // Boolean / String / Array / Object / jQuery object / DOM element
message             : ""           // String / jQuery object / DOM Element
queue               : true         // Boolean
speed               : 200          // Integer / String
title               : ""           // String / Boolean
top                 : "25%"        // Integer / String
width               : undefined    // Integer / String

// Each property represents a button. Here is a template with default values:
{
    name : {
        customClass : undefined   // String
        text        : ""          // String
        keyCode     : undefined   // Integer / String / Array
    },
    ...
}

// This as a short version:
{
    button1 : "Some caption",
    button2 : "Some other caption"
}

// This is slightly longer, but it's the exact same:
{
    button1 : {
        text    : "Some caption"
    },
    button2 : {
        text    : "Some other caption"
    }
}

// Array: each element represents a textbox's default value. You can use empty strings if you don't want to set any default value:
["default value 1", "default value 2", "default value 3" ... ]

// Object: each property represents an <input> or <select>. Additional details may be provided. Here is a template with default values:
{
    name : {
        type            : "text"            // String
        label           : undefined         // String
        title           : undefined         // String
        defaultValue    : undefined         // String/Boolean
        customClass     : undefined         // String
        autotrim        : true              // Boolean      - Only applicable to type == "text", "password" and "textarea"
        maxlength       : undefined         // Integer      - Only applicable to type == "text", "password" and "textarea"
        message         : undefined         // String       - Only applicable to type == "caption"
        options         : {"" : "&nbsp;"}   // Object/Array - Only applicable to type == "select"
        resize          : false             // Boolean      - Only applicable to type == "textarea"
        rows            : undefined         // Integer      - Only applicable to type == "textarea"
        htmlAttributes  : {}                // Object       - Only applicable to type == "text", "password", "date", "time", "number", "color" and "email"
    },
    ...
}

// Object: you can specify values and displayed texts separately
options : {
    "value1"  : "Displayed text 1",
    "value2"  : "Displayed text 2",
    "value3"  : "Displayed text 3"
    ...
}

// Array: values are the same as displayed texts
options : [
    "value1", "value2", "value3" ... ]
]

htmlAttributes : {
    "min"  : "2019-01-01",
    "max"  : "2019-12-31"
}

$.MessageBox({
    input    : true,
    message  : "Some message"
}).done(function(data, button){
    // Check data and button values
    console.log(data);
    console.log(button);
});

// Alert
$.MessageBox("A plain MessageBox can replace Javascript's window.alert(), and it looks definitely better...");

// Confirm
 $.MessageBox({
    buttonDone  : "Yes",
    buttonFail  : "No",
    message     : "This looks better than a window.confirm(), don't you agree?"
}).done(function(){
    $.MessageBox("Me too!");
}).fail(function(){
    $.MessageBox("Yeah, sure... you IE6 nostalgic!");
});

// Prompt
$.MessageBox({
    input    : true,
    message  : "What's your name?"
}).done(function(data){
    if ($.trim(data)) {
        $.MessageBox("Hi <b>"+data+"</b>!");
    } else {
        $.MessageBox("You are a mysterious one...");
    }
});

// Wrapper functions
function MessageBoxConfirm(message){
    return $.MessageBox({
        buttonDone  : "Yes",
        buttonFail  : "No",
        message     : message
    });
}

function MessageBoxPrompt(message){
    return $.MessageBox({
        input   : true,
        message : message
    });
}

// Concise Confirm
MessageBoxConfirm("Is this simple enough?").done(function(){
    // Do something in response to YES
}).fail(function(){
    // Do something in response to NO
});

// Concise Prompt
MessageBoxPrompt("Give me some data:").done(function(data){
    // Do something with this data
});

// Just a regular MessageBox, all options to default
$.MessageBox("First");

// The same as the first one, it goes to the queue after it
$.MessageBox("Second");

// Now the interesting one: setting queue to false will show this MessageBox immediately on top of the others
$.MessageBox({
    message : "Third",
    queue   : false
});

// Simple buttons: pass a string to buttonDone and buttonFail
$.MessageBox({
    buttonDone  : "OK",
    buttonFail  : "Cancel",
    message     : "Some message..."
}).done(function(data, button){
    console.log("Handler: .done()");
    console.log("Button: " + button);
}).fail(function(data, button){
    console.log("Handler: .fail()");
    console.log("Button: " + button);
});

// Custom buttons: use a configuration object
$.MessageBox({
    buttonDone  : {
        one : {
            text    : "1 - Nice",
            keyCode : [49, 97]
        },
        two : {
            text    : "2 - Super",
            keyCode : [50, 98]
        },
        three : {
            text    : "3 - Great",
            keyCode : [51, 99]
        }
    },
    buttonFail  : {
        zero : {
            text    : "0 - Meh",
            keyCode : [48, 96]
        },
    },
    buttonsOrder    : "fail done",
    message         : "How do you like it?<br>Click a button or press keys 0 to 3 on your keyboard:"
}).done(function(data, button){
    console.log("Handler: .done()");
    console.log("Button: " + button);
}).fail(function(data, button){
    console.log("Handler: .fail()");
    console.log("Button: " + button);
});

// Shorthand: define only the buttons name and text
$.MessageBox({
    buttonDone  : {
        yes         : "Yes",
        maybe       : "Maybe"
    },
    buttonFail  : {
        no          : "No"
    },
    message     : "Will you marry me?"
}).done(function(data, button){
    console.log("Handler: .done()");
    console.log("Button: " + button);
}).fail(function(data, button){
    console.log("Handler: .fail()");
    console.log("Button: " + button);
});

// Simple textbox
$.MessageBox({
    input    : true,
    message  : "Input some string:"
}).done(function(data){
    console.log(data);
});

// Simple textbox with default value
$.MessageBox({
    input    : "Some default value",
    message  : "Input some string (again):"
}).done(function(data){
    console.log(data);
});

// Multiple textboxes with default values
$.MessageBox({
    input    : ["Default value 1", "Default value 2", ""],
    message  : "Now let's try with three simple textbox.<br>For the first two a default value is provided:"
}).done(function(data){
    console.log(data);
});

// Multiple inputs of different types
$.MessageBox({
    message : "<b>Here is a complex form with different input types!</b>",
    input   : {
        text1    : {
            type         : "text",
            label        : "Some text:",
            title        : "Input some text"
        },
        text2    : {
            type         : "text",
            label        : "Some text (max 10 characters):",
            title        : "Input some other text",
            defaultValue : "Hi!",
            maxlength    : 10
        },
        password1 : {
            type         : "password",
            label        : "Secret password:",
            title        : "Type password here"
        },
        checkbox1 : {
            type         : "checkbox",
            label        : "A good ol' checkbox:",
            title        : "Check or uncheck this, no big deal"
        },
        dummy_caption : {
            type         : "caption",
            message      : "This is a <b>caption</b>, sometimes you might need one"
        },
        select1 : {
            type         : "select",
            label        : "Select with values same as displayed texts:",
            title        : "Select a letter",
            options      : ["A", "B", "C", "D", "E"]
        },
        select2 : {
            type         : "select",
            label        : "Select with values and texts specified and a default choice selected:",
            title        : "Select S",
            options      : {
                "A" : "Letter A",
                "B" : "Letter B",
                "C" : "Letter C",
                "D" : "Letter D",
                "E" : "Letter E"
            },
            defaultValue : "C"
        }
    },
    top     : "auto"
}).done(function(data){
    console.log(data);
});

// Custom DOM/jQuery Element
var select = $("<select>", {
    css : {
        "width"         : "100%",
        "margin-top"    : "1rem"
    }
});
select.append("<option>Option One</option>");
select.append("<option>Option Two</option>");
select.append("<option>Option Three</option>");
$.MessageBox({
    message : "Choose an Option:",
    input   : select
}).done(function(data){
    console.log(data);
});

// Simple
$.MessageBox({
    buttonDone      : "OK",
    buttonFail      : "Cancel",
    message         : "You won't be able to continue unless you enter some string here:",
    input           : true,
    filterDone      : function(data){
        if (data === "") return false;
    }
});

// Error
$.MessageBox({
    buttonDone      : "OK",
    buttonFail      : "Cancel",
    message         : "If you don't compile both fields an error message will pop up:",
    input           : ["", ""],
    filterDone      : function(data){
        if (data[0] === "") return "Please fill the first input";
        if (data[1] === "") return "Please fill the second input";
    }
});

// Ajax
$.MessageBox({
    buttonDone      : "OK",
    buttonFail      : "Cancel",
    message         : "You can even perform an ajax request<br>to validate the inputs:",
    input           : {
        username : {
            type    : "text",
            label   : "Username (user):",
            title   : "Username"
        },
        password : {
            type    : "password",
            label   : "Password (secret):",
            title   : "Password"
        }
    },
    filterDone      : function(data){
        // Note the use of ".then()" instead of ".done()" to return a new promise
        return $.ajax({
            url     : "login_1.php",
            type    : "post",
            data    : data
        }).then(function(response){
            if (response == false) return "Wrong username or password";
        });
    }
});

// Ajax with HTTP status code
$.MessageBox({
    buttonDone      : "OK",
    buttonFail      : "Cancel",
    message         : "A better example, using HTTP status codes:",
    input           : {
        username : {
            type    : "text",
            label   : "Username (user):",
            title   : "Username"
        },
        password : {
            type    : "password",
            label   : "Password (secret):",
            title   : "Password"
        }
    },
    filterDone      : function(data){
        // Note the use of ".then()" instead of ".done()" to return a new promise
        return $.ajax({
            url     : "login_2.php",
            type    : "post",
            data    : data
        }).then(function(){
            // HTTP status code 200: Login OK
            return true;
        }, function(jqXHR, textStatus, errorThrown){
            // Any other HTTP status code: Login failed
            return "Message from server (" + jqXHR.status + "):<br>" + jqXHR.responseText;
        });
    }
});

// Custom MessageBox
$.MessageBox({
    customClass         : "custom_messagebox",
    customOverlayClass  : "custom_messagebox_overlay",
    message             : "Radius... radius everywhere! <i>(and green too)</i>",
    title               : "A NICE TITLE, WHY NOT?"
});

// Custom Buttons
$.MessageBox({
    buttonDone  : {
        cool : {
            text        : "Cool",
            customClass : "custom_button",
            keyCode     : 13
        }
    },
    buttonFail  : "Boring",
    input       : {
        input1    : {
            type        : "text",
            label       : "A custom input",
            customClass : "custom_input"
        }
    },
    message     : "You can customize single buttons or inputs using their <i>customClass</i> property"
});

$.MessageBoxSetup({
    buttonDone  : "Got it!",
    speed       : 300,
    top         : "auto"
});