rolandua/tinymodal

Clean, Fast, Modular and customizable Modal Window controller

tinyModal.js

Clean, Fast, Modular and customizable Modal Window controller

What? Another one?

But this one is really flexible. And only 2kb (min). And semantic-oriented (content must be in the document).

Features

• Super fast ✔
• Super lightweight ✔✔✔
• JS only 2kb (.min) ✔
• CSS only 0.8kb (.min) ✔
• IE8+ ✔
• Total control of design and transition effects ✔✔
• No need or jQuery or other library (Vanilla JS) ✔✔✔
• Open Source 🌟

Still not convinced? Check out this ↓ complete ↓ comparison ↓ table ↓

	tinyModal	Lightbox	Fancybox 2	Bootstrap's Modal.js
Size	2kb ✔	8kb	23kb	8kb
Dependency	just some CSS ✔	jQuery (+88kb)	jQuery (+88kb)	jQuery (+88kb) + Bootstrap.js (30kb)
Performance	smooth ✔	heavy repaint	heavy repaint	good
Design	your CSS ✔	own	own	own
Effects	your CSS3 ✔	own	own	own
Responsive	sure ✔	nope	nope	yes
Mobile-friendly	yep ✔	nope	nope	nope
Conflict	none ✔	probably	probably	probably
Target	coders ✔	newbies	newbies	newbies

Demos

tinyModal demo

Use

• Add tinyModal.css and tinyModal.js to your pages/templates.

• Create as many modal windows as needed using the following markup and the tinymodal-window class:

<aside id="first-modal" class="tinymodal-window">
	<div class="tinymodal-inner">
    	...
    	<button class="tinymodal-close">X</button>
    </div>
</aside>

• Then call the modal using a link and tinymodal-modal class:

<a href="#first-modal" class="tinymodal-modal">Open first-modal</a>

• Apply the event handler to all links (or other selector):

var links = document.querySelectorAll('a.tinymodal-modal');

for (var i = 0; links.length > i; i++) {
  links[i].addEventListener("click", function(event){  // callback
    event.preventDefault();
    var element = this.getAttribute("href");
    tinyModal.openModal(element, function(){
      var closeLink = this.querySelectorAll('a[href="javascript:closeModal()"]');
      if (closeLink.length < 1) {
        var closeLink = document.createElement("a");
        closeLink.setAttribute("href","javascript:closeModal()");
        closeLink.innerHTML = "X";
        this.appendChild(closeLink);
      }
    });
  });
}

• If needed, you can open modal windows using JavaScript and the onClick event:

<button onclick="javascript:openModal();">Open #first-modal with JS</button>
<button onclick="javascript:closeModal();">Close with JS</button>

function openModal() {
    tinyModal.openModal("#first-modal", function(){ 
        // callback
        console.log('#first-modal opened'); 
    });
}

function closeModal() {
    tinyModal.closeModal(function(){  
        // callback
        console.log('closed by closeModal() function');
    });
}

Design

Base modal styles are included in tinyModal.scss but you should add your own styles. Base CSS clases for design are:

.tinymodal-cover    {}
.tinymodal-window   {}
.tinymodal-active   {}
.tinymodal-close    {}

And the functional CSS clases are:

.tinymodal-ready        {}
.tinymodal-active       {}
.tinymodal-window-open  {}
.tinymodal-ready        {}

Developing

Need to change anything?

$ git clone 	https://github.com/juanbrujo/tinyModal.git
$ npm install
$ grunt // build
$ grunt watch // develop
$ grunt testjs // jshint test

Bugs?

tinyModal issues