Vanilla Modal: A Plain JavaScript Modal for the Rest of Us
Do we really need another modal script? The short answer is “yes.” For better or worse, modal windows are here to stay. Many solutions have existed in the past that take the headache out of manually coding up a modal window: Lightbox, Thickbox, Colorbox (can you spot the trend?) and so on. However, many such solutions are outmoded by today’s standards.
The future of JavaScript is light. The future of JavaScript is modular. Browser vendors have known this for some time, and with the impending release of ECMAScript 2015 (the Artist Formerly Known as Harmony) and the upsurge in popularity of server-side JavaScript thanks to Node.js and io.js, developers are catching on too.
Enter Vanilla Modal, a modal built using ECMAScript 2015 that properly separates concerns (in other words, HTML, CSS and JavaScript don’t step on each other’s toes) and has zero dependencies. Better yet, its JavaScript component has a minified & gzipped footprint of 1.8KB.
Styling, breakpoints and transitions are controlled by you, using CSS. The markup of your modal is left entirely to you. And the content? Vanilla Modal can display any DOM element that already exists on the page, so you can theoretically open anything you like inside a modal window.
You can even have the window resize automatically to fit a page or series of pages from an iframe (just remember the same-origin policy when opening iframes). Essentially, there is no predefined stylesheet; no extant markup; and only a tiny glob of JavaScript to include in your project.
Perhaps most significantly, this modal doesn’t rely on any other JavaScript libraries. No jQuery, no Zepto, no AngularJS. This in turn makes it possible to integrate it seamlessly with your framework of choice — all events are delegated from the document, meaning Vanilla Modal will work even in a constantly-changing, stateful JavaScript single page app.
I’d tried a great number of modal solutions before finally giving up and designing my own. Every solution I attempted had a fatal flaw of some kind, be it a dreadful API, embedded markup, a narrow selection of available animations or use of the CSS :target pseudo-class (more on that in the documentation). I hope that this one will suit you as well as it’s suited the several projects it’s about to be deployed on in the wild.
Vanilla Modal is compatible with the evergreen desktop and mobile browsers, as well as IE 9+. It works with ES2015 imports, AMD and CommonJS loaders. It’s also available on NPM. Find it at the addresses below:
Enjoy! Don’t forget to let us know in the comments where you used Vanilla Model.
