Bootstrap Message Live preview
Interaction lab / 02.0

jQuery Bootstrap Message Plugin Demos

Download Back To jQueryScript

A hands-on preview of status, dismissal, visibility, and live option changes.

Direct HTML jQuery plugin No build step
01Core output

A signal board for the everyday states.

Dismissible info, an error state, dynamic HTML, and a persistent notice share one calm canvas.

Live canvas 04 active
Default initinfo / dismiss: true
Your workspace is synced and ready.
Type overrideerror / dismiss: true
The last request needs your attention.
Dynamic payloadHTML message
Persistent noticeinfo / dismiss: false
This notice stays until you decide what to do.

Close either dismissible alert to watch the active count update.

02Options in motion

Change the payload while it is running.

Try a new type, toggle dismissal, or send a small piece of HTML through the live message.

init options show hide destroy
Runtime targetinfo / dismiss: true
The payload can change in place.
The plugin inserts this value as the message body.
03Visibility + lifecycle

Start hidden. Show, hide, or restore.

The target below begins with autoShow off, then follows the plugin's visibility and teardown methods.

Visibility target hidden on init
Current state Hidden on initialization
04Collection init

One call. Multiple matched targets.

Two elements below are initialized together from the same class selector, then can be restored as a group.

Batch targets 2 initialized
A
The first matched target is ready.
B
The second matched target is ready.

Both alerts share the same initialization call.