Preview Purchase
Base Components

Tailwind CSS Dismiss

Tailwind CSS Dismiss component allows users to hide elements like alerts or notifications with a click.

Remove Mode

Dismiss the element with a smooth transition, ensuring it is removed from the DOM.
Preview HTML
Jane Perez wants to join chat
1 day ago Design Team

Hide Mode

Dismiss the element with a smooth transition, ensuring it is hidden with .hidden Tailwind CSS Class.
Preview HTML JavaScript
Apr
12
Event Invitation 9:00 PM - 10:00 PM
+3

Source Code

The following source file manages the JavaScript behavior of the Tailwind CSS Dismiss component. Upon building the assets using Webpack Build Tools , the below file is compiled and added into the dist/assets/js/core.bundle.js bundle, making it available globally across all pages.
File Description
src/core/components/dismiss/dismiss.ts The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Dismiss component.

HTML Markup

The following markup outlines the core structure of the Tailwind CSS Dismiss component. 
				
					<div id="my_dismisslable">
 <p>
  Dismissable content goes here
 </p>
 <button class="btn btn-primary" data-dismiss="#my_dismisslable" data-dismiss-mode="hide" id="my_dismisser">
  Dismiss
 </button>
</div>

Data Attribute Initialization

Auto-initialize all KTDismiss instances on page load by adding the data-dismiss="#element_id" attribute to your dismiss element. This triggers on the fly initialization by the KTDismiss JavaScript component. 
				
					<div id="my_dismisslable">
 <p>
  Dismissable content goes here
 </p>
 <button class="btn btn-primary" data-dismiss="#my_dismisslable" data-dismiss-mode="hide" id="my_dismisser">
  Dismiss
 </button>
</div>
These attributes allow you to set options for the KTDismiss component during initialization. The values you provide as strings are automatically converted to the appropriate KTDismiss Options .
HTML Attribute Type Default Description
data-dismiss string - Used to auto-initialize KTDismiss instances on page load and provides a string value serving as an ID selector, "#content_id" for a collapsible element. Alternatively, you can remove it and perform initialization using JavaScript.
data-dismiss-hidden-class string "hidden" Tailwind CSS class to use for the hidden state of the dismissable elements.
data-dismiss-interrupt boolean true Prevents event propagation when the dismiss element is clicked.
data-dismiss-mode
enum
"remove" | "hide"
"remove" By using "hide" mode, you can hide dismissed elements within the DOM structure, preserving their state for potential re-display later. This differs from the default behavior "remove" , which permanently removes them from the DOM.

JavaScript Initialization

To initialize a new dismiss component, pass the corresponding DOM element and configuration options to the KTDismiss class constructor.
JavaScript HTML 
				
					// Dismisser element
const dismisserEl = document.querySelector('#my_dismisser');

// Configuration options(optional)
const options = {
	mode: 'active',
	target: '#my_dismissable'
};

// Initialize object
const dismisser = new KTDismiss(dismisserEl, options);

To initialize the dismiss with JavaScript, use the data-dismiss="false" attribute instead. This prevents automatic initialization on page load.

Options

This table outlines the configuration options for initialization of Tailwind CSS Dismiss instances, using the KTDismiss JavaScript component.
Option Type Default Description
target string - An ID selector of a dismissable element. Example: "#my_dismissable" .
mode
enum
"remove" | "hide"
"remove" By using "hide" mode, you can hide dismissed elements within the DOM structure, preserving their state for potential re-display later. This differs from the default behavior "remove" , which permanently removes them from the DOM.
data-dismiss-interrupt boolean true Prevents event propagation when the dismiss element is clicked.
hiddenClass string "hidden" Tailwind CSS class to use for the hidden state of the dismissable elements.

Utilities

Manage and interact with KTDismiss instances using these static methods of KTDismiss class.
Method Description
init() Automatically initializes KTDismiss object for all elements with the data-dismiss="true" attribute on page load.
createInstances() Allows to create KTDismiss instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
getInstance(element) Returns the KTDismiss object associated with the given DOM element element .
getOrCreateInstance(element) Returns the existing KTDismiss object for the provided DOM element element , or creates a new instance if none exists, then returns the same.
JavaScript HTML 
				
					// Initialize all dismisses
KTDismiss.init()

// Initialzie pending dismisses
KTDismiss.createInstances();

// Get dismiss object
const dismisserEl = document.querySelector('#my_dismisser');
const dismiss = KTDismiss.getInstance(dismisserEl);

Methods

Use KTDismiss component's API methods to programmatically control its behavior.
Method Description
new KTDismiss(element, options) Creates an object instance of KTDismiss class for the given DOM element and configuration options .
dismiss() Executes the dismissal action on the target element.
getTargetElement() Retrieves the DOM element targeted by a specific KTDismiss instance.
getOption(name) Retrieves the value of a configuration option by name parameter from a KTDismiss instance.
getElement() Retrieves the DOM element linked to a specific KTDismiss instance.
on(eventName, handler) Allows attaching event listeners to the KTDismiss custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTDismiss. The function returns string as a unique identifier for the registered listener, allowing you to remove it later if needed.
off(eventName, eventId) Removes an event listener for the eventName and eventId parameters attached with the on method.
dispose() Removes the KTDismiss instance from an element, including any associated data stored on the DOM element.
JavaScript HTML 
				
					const dismisserEl = document.querySelector('#my_dismisser');
const dismiss = KTDismiss.getInstance(dismisserEl);

dismiss.dismiss();

Events

KTCollapse custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.
Event Description
dismiss Triggered immediately before a dismissible element is hidden.
dismissed Triggered immediately after a dismissible element is hidden. 
				
					const dismisserEl = document.querySelector('#my_dismisser');
const dismiss = KTDismiss.getInstance(dismisserEl);

dismiss.on('dismiss', () => {
	detail.cancel = true;
	console.log('dismiss action canceled');
});

dismiss.on('dismissed', () => {
	console.log('dismissed event');
});
Previous DataTable Next Drawer