Dismiss

A jQuery plugin that adds the functionality to hide to any parent element it targets. Uses CSS transitions to perform the animation.

Comes with a markup API that allows running the plugin without writing a single line of JavaScript. This is Responsive's first class API and should be your first consideration when using a plugin.


Examples


Markup

/* Add inside any element. */
<button role="button" data-dismiss-target="YOUR_PARENT_SELECTOR">x</button>

Methods

The dismiss plugin exposes the following method signatures.

.dismiss(options)
Initialises the plugin with an optional options object
options
Contains parameters to pass to the plugin.
target
A jQuery selector indicating which target to hide.
closeHint
A hidden html value that is added to the close trigger for accessibility purposes. Defaults to Click to close

Events

The dismiss plugin exposes the following events allowing the developer to tap into its behaviour.

dismiss.r.dismiss
This event is fired immediately when the plugins dismiss instance method is invoked.
dismissed.r.dismiss
This event is fired when the plugins dismissed instance method is invoked once the target has completed the animation and is hidden.

Binding to these events is as follows:

// Bind to the close event.
$("YOUR_TRIGGER_SELECTOR").on("dismiss.r.dismiss", function(event) {
    // Your custom behaviour...
});
                                               
// Bind to the closed event.
$("YOUR_TRIGGER_SELECTOR").on("dismissed.r.dismiss", function(event) {
    // Your custom behaviour...
});

Data API

The dismiss plugin's default behaviour is bound using a markup API that allows running the plugin without writing a single line of JavaScript. If you need to override this behaviour the following code will allow you to do so.

// Disable the default loading behaviour
$(document).off(".r.dismiss.data-api");