Alerts

Enable dismiss functionality for alert messages.

Examples

<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Objects in the mirror are closer than they appear.
  <button type="button" class="close" data-cfw-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>

<div class="alert alert-danger" role="alert">
  <h4>Oops! You got an error!</h4>
  <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
  <p>
    <button type="button" class="btn btn-danger">Take this action</button>
    <button type="button" class="btn btn-secondary" data-cfw-dismiss="alert">Close</button>
  </p>
</div>

The dismiss will work with dynamically inserted alerts.

Usage

Via Data Attributes

Just add data-cfw-dismiss="alert" to a close button inside the alert container to automatically give an alert close functionality.

Via JavaScript

Enable dismissal of an alert via JavaScript:

$(".alert").CFW_Alert();

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-cfw-alert, as in data-cfw-alert-animate="false".

Methods

.CFW_Alert(options)

Activates the element as a dismiss trigger. (Not necessary when using the Figuration widget API is enabled.) Accepts an optional options object.

$('#myAlert').CFW_Alert({
  animate: false
});

.CFW_Alert('close')

Closes an alert.

.CFW_Alert('dispose')

Removes the click event listener from a trigger. This will not disable a dismiss item if the Figuration widget API is enabled.

Events

Event callbacks happen on the target alert container.

$('#myAlert').on('beforeClose.cfw.alert', function () {
  // do something...
});