CAST Figuration®

Alerts alert.js

Enable dismiss functionality for alert messages.

Page Contents

Accessibility Warning

When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, it is recommended to use additional JavaScript that listens for the afterClose.cfw.alert event and programmatically sets focus() to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, be sure to add tabindex="-1" to the element.

Examples

For more examples of alert container layout and content, check out the Alerts component page.

These examples show the automatically attached alert dismiss triggers, enabled through data attributes.

<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.

<p>
  <button type="button" class="btn btn-primary" id="alertCreate">Insert Alert</button>
</p>
<div id="alertDemoContainer"></div>

<script>
  $('#alertCreate').on('click', function() {
    $('#alertDemoContainer').after('<div class="alert alert-info" role="alert"><button type="button" class="close" data-cfw-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times</span></button><strong>Sample alert!</strong> Click my close button --&gt;</div>');
  });
</script>

Enable an alert's dismiss trigger through scripting.

<div class="alert alert-primary" role="alert">
  <button id="alertBtn0" type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Hey!</strong> Remove this alert with the default fade animation.
</div>

<div class="alert alert-secondary" role="alert" id="alert1">
  <button id="alertBtn1" type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Boom!</strong> Remove this alert without the animation.
</div>
$('#alertBtn0').CFW_Alert();

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

If the dismiss button is disabled, then the close action will be blocked.

<div class="alert alert-danger" role="alert">
  <button type="button" class="close" data-cfw-dismiss="alert" aria-label="Close" disabled><span aria-hidden="true">&times;</span></button>
  <strong>Sorry!</strong> You can't close me.
</div>

Usage

Via Data Attributes

Dismissal can be achieved with data-cfw-dismiss attributes on a button within the alert as demonstrated below:

<button type="button" class="close" data-cfw-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

or on a button outside the alert using the additional data-cfw-alert-target as demonstrated below:

<button type="button" class="close" data-cfw-dismiss="alert" data-cfw-alert-target="#myAlert">Close alert</button>

An example can be found in the JavaScript Intergration section within the Badges component page.

Via JavaScript

Enable dismissal of an alert via JavaScript:

$("#myAlert").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".

Name Type Default Description
target string null The selector of the target item to be dismissed, or the parent .alert container will be used.
animate boolean true If alert targets should fade out. 
$('#myAlert').CFW_Alert({
    animate: false
});

Methods

Method calls should be made on the alert dismiss trigger.

Method Name Description
close Closes an alert.
dispose Removes the click event listener from a trigger. This will not disable a dismiss item if the Figuration widget API is enabled. 
$('#myAlertDismiss').CFW_Alert('close');

Events

Event callbacks happen on the target alert container.

Event Type Description
beforeClose.cfw.alert This event is fired immediately when the close method is called.
afterClose.cfw.alert This event is fired when an alert has been closed (will wait for CSS transitions to complete). 
$('#myAlert').on('beforeClose.cfw.alert', function() {
  // do something...
});
Top of Page