/ COMPUTER SCIENCE, JAVASCRIPT / 1 min read

Vanilla Javascript Tingle Modal

En la búsqueda de un modal que sea realmente sencillo, sin tanta dependencia y sin usar jQuery, encontré el siguiente modal: Tingle.

Código fuente en Github

  • Sin dependencias
  • Totalmente personalizable con CSS
  • CSS transitions
  • Simple API
  • Creado con UX en mente

Intalación

Método Procedimiento
Bower bower install tingle –save
NPM npm install tingle.js –save
Download básico download.zip

Solo es necesario agregar el CSS y JS.

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

Ejemplo

Haz clic en el botón para ver el modal en acción.

Solo es necesario lo siguiente:

var modal = new tingle.modal({
    cssClass: ['class1', 'class2']
});

var btn = document.querySelector('.js-tingle-modal-1');
btn.addEventListener('click', function() {
    modal.open();
});

modal.setContent(document.querySelector('.tingle-demo-tiny').innerHTML);

Para más opciones y configuración ver: https://robinparisi.github.io/tingle/

eleazar

Eleazar Resendez

A software engineer — for the last 3 years focused on Laravel framework. Reliable, responsible, serious with a strong entrepreneurial can-Do mentality and the goal of making a huge positive impact on this world.

Read More