Attention Box

Very easy to integrate
Lightweight jQuery plugin
Smooth transitions
Responds to Escape key for cancelling message
Automatic reposition upon window resize or scroll
Can take user inputs
Can be configured to require user input
Can be configured to have different modal overlay colors
Can display error message for input boxes

Installation

<!DOCTYPE html>
<html>
    <head>
        <link href="css/attention_box.css" media="screen" rel="stylesheet" />
        <script src="js/jquery-1.4.2.min.js"></script>
        <script src="js/jquery-ui-1.8.1.custom.min.js"></script>
        <script src="js/attention_box-min.js"></script>
    </head>
    <body>
    </body>
</html>

Demos

1. Basic Message

AttentionBox.showMessage("This is a the Hello World example");

2. Formatted Message

AttentionBox.showMessage('This example has a <strong style="color:red">formatted</strong> message.');

3. Modal Message

AttentionBox.showMessage('This message is modal by diming the background.',
{
    modal : true
});

4. Modal Message with blue background

AttentionBox.showMessage('This modal message has blue background.',
{
    modal      : true,
    modalcolor : "#0000ff"
});

5. Message with multiple buttons

AttentionBox.showMessage('This message can have multiple buttons.',
{
    buttons : 
    [
        { caption : "Yes" },
        { caption : "No"  }
    ]
});

6. Message with important button

AttentionBox.showMessage('This message can have multiple buttons.',
{
    buttons : 
    [
        { caption : "Blue" },
        { caption : "Red", important : true }
    ]
});

7. Message with a cancel button

AttentionBox.showMessage('A message can has a cancel button.',
{
    buttons : 
    [
        { caption : "Cancel", cancel: true },
        { caption : "Save" }
    ]
});

8. Message that takes user input

AttentionBox.showMessage('This message can take user input.',
{
    inputs : 
    [
        { caption: "Fullname" }, 
        { caption: "Age" } 
    ]
});

9. Message with prepopulated input boxes

AttentionBox.showMessage('This message has pre-populated input boxes.',
{
    inputs : 
    [
        { caption: "Fullname", value: "Denon Studio" }, 
        { caption: "Age", value: "12" } 
    ]
});

10. Message with required input boxes

AttentionBox.showMessage('This message has required input boxes.',
{
    inputs : 
    [
        {caption: "Fullname", value: "Denon Studio", required: true }, 
        {caption: "Age", required: true } 
    ]
});

11. Message with error messages

AttentionBox.showMessage('This message has error messages for input boxes.',
{
    inputs : 
    [
        {caption: "Fullname", error: "Invalid fullname" }, 
        {caption: "Email" },
        {caption: "Age", error: "Invalid age" } 
    ]
});

12. Message with handler callback

AttentionBox.showMessage("This message is handled using a callback.", 
{ 
    modal  : true,
    inputs : 
    [
        {caption: "Fullname", value: "Denon Studio", required: true}, 
        {caption: "Age", value: "34", required: true}, 
        {caption: "How did you hear about us?", value: "Newspaper", required: true}
    ],
    callback: function(action, inputs)
    {
        var message = "";

        if (action != "CANCELLED")
        {
            message = "User inputs were:";							
            for (var i = 0; i < inputs.length; i++)
                message += inputs[i].caption + " <strong>" + inputs[i].value + "</strong><br/>";
        }
        else
        {
            message = "User canceled";							
        }

        AttentionBox.showMessage(message); 
     }
});