Simple jQuery UI & jQuery Mobile Message Box Plugin

Message.js is a lightweight jQuery plugin that makes use of jQuery UI and jQuery Mobile styles to show info or error message boxes on your webpage/web application.

More examples:

• jQuery Mobile
• Kendo UI

Basic usage (Styled with jQuery UI):

1. Load jQuery library and jQuery UI framework on your web page.

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"</script>

2. Load the jQuery message.js plugin's stylesheet & script on the web page.

<link href="path/to/jquery.ui.message.css" rel="stylesheet">
<script src="path/tojquery.ui.message.js"></script>

3. Show a basic error message box with custom message and a dismiss link.

$fn.message({
  type: "error", 
  message: "Custom message" 
});

4. Options and defaults.

$fn.message({

  // leave blank to use element html
  message: "", 

  // info or error
  type: "info", 

  // append 'Click to dismiss' to message and hide on click
  dismiss: true, 

  // show on initialize
  autoShow: true 

});

5. Public methods.

// shows the message box
$fn.message("show");

// hides the message box
$fn.message("hide");

// changes the options
$fn.message('options', {// OPTIONS});

// destroy the plugin
$fn.message("destroy");

Changelog:

v1.11.4 (2021-09-02)

• Bugfix

2015-01-16

• Replaced 'dismiss' with built in close button
• Added bootstrap.message and updated demos

---

This awesome jQuery plugin is developed by jrummell. For more Advanced Usages, please check the demo page or visit the official website.