MsgBox is compatible and fully tested with Safari 4+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

Setup

Upload every files of MsgBox to your server (images, css and javascript) and add the following lines between the HEAD tag on your page:

<script type="text/javascript" src="javascript/jquery.min.js"></script>

<script type="text/javascript" src="javascript/msgbox/jquery.msgbox.js"></script>
<link rel="stylesheet" type="text/css" href="javascript/msgbox/jquery.msgbox.css" />

Documentation

$.msgbox(message, [options], [callback]);

message

The message can either be a plain text or an html string.

Example:

$.msgbox("Your Message.");

options

  • type: (text)
    • alert
    • info
    • confirm
    • prompt
    • error

Example:

$.msgbox("Your Message.", {type:"error"});
  • buttons: (array)
    • {type: "submit", value: "Accept"}
    • {type: "cancel", value: "Cancel"}

Example:

$.msgbox("Your Message.", {
  type:"alert",
  buttons: [
    {type: "submit", value: "OK"}
  ]
});

Another example:

$.msgbox("Your Message.", {
  type: "confirm",
  buttons: [
    {type: "submit", value: "Yes"},
    {type: "cancel", value: "No"}
  ]
});
  • inputs: (array)
    • {type: "text", value: "Default Value", label: "YourLabel", required: false }
    • {type: "password", value: "", label: "YourLabel:", required: false }

Example:

$.msgbox("Insert your name below:", {
  type: "prompt",
  inputs: [
    {type: "text", value: "", label: "Name:", required: true }
  ]
});

callback

A function to be called when the msgbox is submitted and removed. Returns the value of the button pressed.

function(result, [ result2 ], [ resultN ]) {}

Example:

$.msgbox("Are you sure?", {
  type: "confirm", 
  buttons: [
    {type: "submit", value: "Yes"},
    {type: "cancel", value: "No"}
  ]
}, function(result) {
  if (result) {
    alert('You have pressed Yes');
  }
});

Another example:

$.msgbox("Example data", {
  type: "prompt", 
  inputs: [
    {type: 'text', value: '1', label: 'Text1'},
    {type: 'text', value: '2', label: 'Text2'},
    {type: 'text', value: '3', label: 'Text3'},
    {type: 'text', value: '4', label: 'Text4'},
    {type: 'text', value: '5', label: 'Text5'}
  ]
}, function(e1, e2, e3, e4, e5) {
  if (e1) { // user have pressed Accept
    alert('Text4: ' + e4);
  }
});

Examples

Example 1

To simply call MsgBox like you would a regular alert command:

$.msgbox("The selection includes process white objects. Overprinting such objects is only useful in combination with transparency effects.");

Example 2

To add a couple extra buttons with different values:

$.msgbox("Are you sure that you want to permanently delete the selected element?", {
  type: "confirm",
  buttons : [
    {type: "submit", value: "Yes"},
    {type: "submit", value: "No"},
    {type: "cancel", value: "Cancel"}
  ]
}, function(result) {
  $("#result2").text(result);
});

Result:

Example 3

$.msgbox("jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.", {type: "info"});

Example 4

$.msgbox("An error 1053 ocurred while perfoming this service operation on the MySql Server service.", {type: "error"});

Example 5

$.msgbox("Insert your name below:", {
  type: "prompt"
}, function(result) {
  if (result) {
    alert("Hello " + result);
  }
});

Advanced Examples

Advanced Example 1

$("#advancedexample1").click(function() {
  $.msgbox("<p>In order to process your request you must provide the following:</p>", {
    type    : "prompt",
    inputs  : [
      {type: "text",     label: "Insert your Name:", value: "George", required: true},
      {type: "password", label: "Insert your Password:", required: true}
    ],
    buttons : [
      {type: "submit", value: "OK"},
      {type: "cancel", value: "Exit"}
    ]
  }, function(name, password) {
    if (name) {
      $.msgbox("Hello <strong>"+name+"</strong>, your password is <strong>"+password+"</strong>.", {type: "info"});
    } else {
      $.msgbox("Bye!", {type: "info"});
    }
  });
});