Hello everyone I’m back again with another Pixel2HTML tutorial. This time we’ll make a modal box pop-up kind of like the ones that show up when you try to sign to a newsletter or something related like that. Let’s check the final result first…
The whole idea here is that we have a button with an icon inside of it. Check the article “How to work with SVG icons” for a more in depth look at working with SVGs like a boss.
So on hover we’ll do some fancy GPU accelerated transitions to scale the button and rotate the icon inside of it.
On click the overlay will fade-in and the contents behind it will blur out using some new css filters. Then the modal box shall come down in a bouncy way.
You can then dismiss it by either clicking on the “X” or on the overlay background or by pressing the ESC key on your keyboard.
As I always like to start my projects I’ll do a copy of my always trusty Ground-Zero Repo which also includes my collection of *SaSS mixinsManila Mixins because yummy Mango Manila, you know! 🌴
The directory structure is pretty standard, everything is inside the src directory and after doing gulp it will be compiled and spitted out to the dist directory.
Please Note: This project’s code is made up using Jade, the SaSS Syntax (.sass not .scss) and CoffeeScript, however for the following examples I’ll write the outputs of the compilers so everyone can read the code ❤️
Making the Header First
First I’ll show you the markup and then I’ll break it down into reasonable components:
This is the header part. (This is visible at the beginning)
Now let me show you the CSS for which I do mine with SaSS:
That’s quite some CSS let me break it down for you a bit:
The first part sets the header to be at least the whole size of the screen sets up a background and turns the text white.
Then using Flexbox I’m perfectly centering all of the contents of the header
The transition property tells the browser to get ready to transition the fill property for a duration stored as a variable (in this case its 0.3s)
Finally I’m using another of my mixins to set up a JS-trigger class that will be called header.is-blurred that will make the header and its contents blur by 5px when the class is applied to the element.
Making the Modal Box
Let’s first take a look at the markup needed for the modal box to happen.
I’m declaring the whole HTML element as an aside because I think it holds more semantic meaning than a simple div
Everything else should be pretty straight forward.
Onto the SaSS:
We have a TON of SaSS happening here, but on a broad scale whats going on is that we are placing the modal box using fixed position on top of everything.
Inside the aside we have the background overlay and also the modal box itself.
We are using flexbox for everything and also a bit of soft shadows for some elements.
I’m first making everything a self-executing function to prevent global scope variable pollution. I then declare variable names for everything I’ll use and then the whole thing the JS does is basically either add the classes needed or remove them depending on the situation.
For extra UX-ness I’ve added the possibility of using the ESC key or clicking the overlay background to remove the modal box.