Dismissible animated alert banners written in plain ol' JavaScript.
$ npm i https://github.com/brookesb91/dismissible/releases/download/v1.0.0/dismissible-1.0.0.tgzInclude the dismissible styles in your HEAD tag
<head>
<!-- Other head stuff... -->
<link rel="stylesheet" href="path/to/dismissible.css" />
</head>Include the dismissible script at the bottom of your BODY tag
<body>
<!-- Other body stuff... -->
<script src="path/to/dismissible.js"></script>
</body>Add an element that will be used as the root container for dismissibles
<body>
<div id="dismissible-container"></div>
<!-- Rest of body -->
</body>Create a Dismissible instance
const container = document.querySelector('#dismissible-container');
const dismissible = new Dismissible(container);// Show informational prompt
dismissible.info('This is an informational alert.');
// Show successful action prompt
dismissible.success('This is a success alert.');
// Show error prompt
dismissible.error('This is an error alert.');
Dismissibles are dismissed when their dismiss button is clicked. However it is possible to dismiss them on demand.
dismissible.dismiss();By default, dismissible use Lineicons library. You can easily replace the icons for a library of your preference.
Include your custom css icons library in your HEAD tag
<head>
<!-- Other head stuff... -->
<link rel="stylesheet" href="path/to/your/css/icons/library.css" />
</head>Add an object with icons classes array to replace the default values
const container = document.querySelector('#dismissible-container');
const dismissible = new Dismissible(container,
{
icons: {
dismiss: ["fas", "fa-times"], // Close icon classes
info: ["fas", "fa-info"], // Info icon classes
success: ["fas", "fa-check"], // Success icon classes
error: ["fas", "fa-exclamation"], // Error icon classes
},
}
);