Press "Enter" to skip to content

Info and Error Message Boxes Styled with jQuery UI

Message.js is a lightweight jQuery plugin that uses jQuery UI Mobile styles to display infoboxes or error messages on your web page/web application.

jquery custom dialog box example, jquery message with buttons example, jquery popup message, jquery message box, ajax dialog box jquery example

How to make use of it:

1. Load jQuery library and jQuery UI framework on your net 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 internet web page.

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

3. Show a primary error message field with a customized 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 strategies.

// 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");

Simple jQuery UI & jQuery Mobile Message Box Plugin, jQuery Message Plugin/Github, open dialog box using jquery, jquery modal dialog


See Demo And Download

Official Website(jrummell): Click Here

This superior jQuery/javascript plugin is developed by jrummell. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.