A slick responsive Material Design modal built with Stylus and JavaScript.

How it works

The key part of this modal is the animation. It’s what gives it the Material Design look and feel, it also happens to be the reason why the code is more complicated than your average modal. Creating the illusion of one element morphing into another always takes some creative thinking.

In this case, the element that you see expanding into the modal, is not the button or the modal, it’s actually a dynamically added <div> that gets appended to the button and expands to the size of the modal, and when the modal actually becomes visible we hide the dynamically appended <div>.

The button has a data-attibute called data-modal. The value of this attribute is equal to the ID of the modal you want to target.

JavaScript

When a button is clicked, we capture the value of the data-attribute and use that to know which modal to open. At the same time we insert the placeholder div into the button and calculate the transform values needed to move the button into the center of the screen, as well as scaling the placeholder div to the same size as the modal. When this animation finishes we add the active class to the modal, which has the same color background as the button and placeholder div so it all looks like one element transforming, when in fact it’s three.