Hermosa notificación de alerta en JavaScript y CSS-Alerts-JS

Vista prévia

Descripción

Alerts-JS es una solución de notificación mínima para la web que facilita la creación de diferentes estilos de alertas de notificación mediante CSS/CSS3.

JavaScript solo se usa para cerrar las notificaciones con una animación de fundido de salida.

Funcionamiento

Importe los archivos JavaScript y CSS necesarios en el documento HTML.

<link href="css/my.css" rel="stylesheet">
<script src="js/my.js"></script>

El código HTML para crear notificaciones de alerta.

<div class="alert">

<span class="alert-close" data-close="alert" title="Close">&times;</span>

<strong>Default</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-red">

<span class="alert-close" data-close="alert" title="Close">&times;</span>

<strong>Red</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-pink">

<span class="alert-close" data-close="alert" title="Close">&times;</span>

<strong>Pink</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-purple">

<span class="alert-close" data-close="alert" title="Close">&times;</span>

<strong>Purple</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-indigo">

<span class="alert-close" data-close="alert" title="Close">&times;</span>

<strong>Indigo</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-blue">

<span class="alert-close" data-close="alert" title="Close">&times;</span>

<strong>Blue</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-cyan">

<span class="alert-close" data-close="alert" title="Close">&times;</span>

<strong>Cyan</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-teal">

<span class="alert-close" data-close="alert" title="Close">&times;</span>

<strong>Teal</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-green">

<span class="alert-close" data-close="alert" title="Close">&times;</span>

<strong>Green</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-orange">

<span class="alert-close" data-close="alert" title="Close">&times;</span>

<strong>Orange</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-brown">

<span class="alert-close" data-close="alert" title="Close">&times;</span>

<strong>Brown</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-bgray">

<span class="alert-close" data-close="alert" title="Close">&times;</span>

<strong>Blue gray</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>