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

Adding the plugin inside any element will hide the closest parent to the plugin matching the given selector on click.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum justo leo, tincidunt at nulla sed, aliquam fermentum mauris. Quisque laoreet, enim et volutpat faucibus, nisi ante gravida dolor, nec ornare libero sapien quis est. Curabitur nec aliquet lacus, sed suscipit neque. Etiam ut sapien tempus, malesuada enim ut, semper diam. Aliquam erat volutpat. Donec eget posuere ligula. Proin fermentum et turpis ut rutrum. Nunc vitae nunc fermentum, aliquam mauris ac, tincidunt dui.

Cras at laoreet enim. Etiam tincidunt mi ut mi tristique facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed nunc ut nisl laoreet adipiscing. Quisque a fermentum libero. Nam at facilisis neque, quis tempus purus. Quisque ultrices est at augue ultricies, vitae rutrum nisl imperdiet. Nullam non erat non mauris eleifend laoreet. Ut nibh nisl, consequat id eleifend nec, tristique quis mauris. Maecenas cursus mi nec lorem elementum pulvinar. Vestibulum eu sem quam.

Markup

/* Add inside any element. */
<a href="#" data-dismiss-target="YOUR_PARENT_SELECTOR">x</a>

Methods

The dismiss plugin exposes the following method signatures.

.dismiss(target): Initialises the plugin with a target parameter. A jQuery selector indicating which target to hide.

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.

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.

// Override the default behaviour
$(document.body).off("click.r.dismiss")
                .on("click.r.dismiss", ":attrStart(data-dismiss)", function (event) {    
                    // Your custom behaviour...
                });
                
// Bind to the close event.
$("YOUR_PARENT_SELECTOR").on("dismiss.r.dismiss", function(event) {
    // Your custom behaviour...
});
                                               
// Bind to the closed event.
$("YOUR_PARENT_SELECTOR").on("dismissed.r.dismiss", function(event) {
    // Your custom behaviour...
});