rongguoxu / dismissible

:mega: Animated dismissible alerts.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Dismissible

dismissible

Dismissible animated alert banners written in plain ol' JavaScript.

Quick Start

Install with Node

$ npm i https://github.com/brookesb91/dismissible/releases/download/v1.0.0/dismissible-1.0.0.tgz

Include 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 dismissibles

// 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.');

Info

Success

Error

Hide dismissibles

Dismissibles are dismissed when their dismiss button is clicked. However it is possible to dismiss them on demand.

dismissible.dismiss();

About

:mega: Animated dismissible alerts.

License:MIT License


Languages

Language:JavaScript 54.1%Language:CSS 45.9%