Attention Box

Overview

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>	
				

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

Other Scripts