Elegant way to display tips/message

hello, im a message link here.
hello, im a message.
<div class="message success" data-ride="message" data-duration="2000">
  <div class="inner">hello, im a message <a href="#" title="">link here</a>.</div>
  <span class="close">&times;</span>

<div class="message bottom warning" data-ride="message">
  <div class="inner">hello, im a message.</div>
  <span class="close">&times;</span>


Message plugin already export to window object.

Click these buttons run the javascript code.

// show message'This is message!');

// hide automaticlly after 2000 milliseconds'This is message!', 2000);

// hide message

// show at bottom{
  message: 'message body show at bottom',
  // the placement can be `top` or `bottom`, by default is `top`
  placement: 'bottom'

// show with status
// add class `danger` to the container
// there're 5 status: [default], success, info, warning, danger{
  message: 'message body show with danger status',
  // the placement can be `top` or `bottom`, by default is `top`
  status: 'danger'


Name Type Default Description
template string '<div class="message"><div class="inner"></div><span class="close">×'</span></div>' Base HTML to use when creating the message. The message's content will be injected into the .inner. .close will become the message's close. The outermost wrapper element should have the .message class.
message string|object null 'message content text/html'
{message: 'text/thml', placement: 'bottom', status: 'danger'}
placement string top The placement can be `top` or `bottom`, by default is `top`
status string '' Show with status, add class `[default]| success| info| warning| danger` to the container.
duration number null Message hide automaticlly after a number



Attaches a message handler to an element collection.


Show the message.



Hide the message.



Toggles the message.



Hide and destroys the message.