Sandbox: JavaScript

Example alerts

Add dismiss functionality to all alert messages with this plugin.

Your computer restarted because of a problem. Sorry for any inconvenience and appreciate your patience.
Holy guacamole! Best check yo self, you're not looking too good.
<div class="alert alert-warning fade in">
  <!-- note: this button has classes for BOTH Bootstrap and FlatUI;
       use "close fui-cross" for FlatUI,  "glyphicon glyphicon-remove" for bootstrap -->
  <button type="button" class="close fui-cross glyphicon glyphicon-remove" data-trigger="nix" data-nix-target="!.alert"></button>
  <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>

Oh snap! You got an error!

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.

Take this action Or do this

<div class="alert alert-block alert-danger fade in">
  <!-- note: this button has classes for BOTH Bootstrap and FlatUI;
       use "close fui-cross" for FlatUI,  "glyphicon glyphicon-remove" for bootstrap -->
  <button type="button" class="close fui-cross glyphicon glyphicon-remove" data-trigger="nix" data-nix-target="!.alert"></button>
  <h4>Oh snap! 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>
    <a class="btn btn-danger" href="#">Take this action</a> <a class="btn btn-default" href="#">Or do this</a>
  </p>
</div>

Usage

This makes use of the Fx.Reveal method .nix() found in MooTools More. Just add data-trigger="nix" data-nix-target="!.alert" to the closing element.

Less Component Required

Be sure to require More-Behaviors/Delegator.Nix when you build your library.

Auto-closing Alerts

You can use Behavior.Startup to hide your alert after a delay:

data-behavior="Startup" data-startup-options="
    'delegators': {
      'nix': {
        'delay': 3000
      }
    }
  "

Related Documentation

Note: Not all links in these work.

Delegator Triggers: Reveal, Dissolve, Nix, ToggleReveal

Provides delegated links to use Fx.Reveal on a given target.

Examples

<div>
    <p>
        <a style="display: block" id="toggleParent" data-trigger="toggleReveal" data-togglereveal-options="'target':'!div', 'fxOptions':{'duration': 0}">Toggle parent</a>
        <a style="display: block" id="toggleSelf" data-trigger="toggleReveal" data-togglereveal-options="'fxOptions':{'duration': 0}">Toggle self</a>
        <a style="display: block" id="revealParent" data-trigger="reveal" data-reveal-options="'target':'!div', 'fxOptions':{'duration': 0}">Reveal Parent</a>
        <a style="display: block" id="revealSelf" data-trigger="reveal" data-reveal-options="'fxOptions':{'duration': 0}">Reveal Self</a>
        <a style="display: block" id="dissolveParent" data-trigger="dissolve" data-dissolve-options="'target':'!div', 'fxOptions':{'duration': 0}">Dissolve parent</a>
        <a style="display: block" id="dissolveSelf" data-trigger="dissolve" data-dissolve-options="'fxOptions':{'duration': 0}">Dissolve self</a>
        <a style="display: block" id="nixParent" data-trigger="nix" data-nix-options="'target':'!div', 'fxOptions':{'duration': 0}">nix parent</a>
        <a style="display: block" id="nixSelf" data-trigger="nix" data-nix-options="'fxOptions':{'duration': 0}">Nix self</a>
        <a style="display: block" id="nixAll" data-trigger="nix" data-nix-options="'targets':'!div a">Nix all the links</a>
    </p>
</div>

The above examples use Fx.Reveal to show, hide, and destroy their respective targets.

Options

  • target - (string) - a selector which will return the DOM element to show/hide. Use selectors provided by Slick to select parents and sibling trees.
  • targets - (string) - same as target except this will apply the effect to multiple targets (all the ones that match the selector).
  • fxOptions - (object; optional) - a set of options to be passed to Fx.Reveal.
  • allowEvent - (boolean) if true the trigger does not call event.preventDefault() - defaults to false.