Skip to Content Skip to Navigation

User Experience Toolkit

Dismissible Messages

A simple enhancement to Messages to enable dismissal by the user.

Default Implementation

Example:

An Information Message

An Information Message

An Information Message

An Information Message

An Information Message

HTML:
<p class="ux-msg ux-closable">
	An Information Message
</p>
JavaScript:
	$(document).ready(function(){
		ux.load('closableMessages');
	});

This simple enhancement can be attachable to any message style structure (p or ul), by simply adding the class of ux-closable to the messages right after the ux-msg class. This preps any message component for the dismissable functionality. To make the messages dismissible simple load the dismissible script by using the ux.load function with the parameter of dismissibleMessages.

Thanks for the feedback! It will help us improve your experience.