Skip to content

Latest commit

 

History

History
executable file
·
145 lines (108 loc) · 3.66 KB

README.md

File metadata and controls

executable file
·
145 lines (108 loc) · 3.66 KB
Raw

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).

tinyModal

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 classes for design are:

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

And the functional CSS classes 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