But custom modals offer more control over both content and display. You could design a modal for a site’s terms of service or to show off a dynamic photo gallery. One of the most common uses for a modal window is adding a login/registration form.
If you’d like to add this functionality to your site, check out this list of 10 free modal window snippets you can use to get there.
My favorite design out of this entire list comes from this snippet running on jQuery.
If you click the login or sign up links in the top-right corner, you’ll be greeted by the same modal box. Here you’ll find two tabs for switching between the forms. They’re both incredibly elegant.
In fact, it’s really the animation and the interface style that grabs my attention. The modal just feels so clean and it could work on practically any website.
The show/hide feature on the password field is a nice extra touch.
Basic jQuery Box
Bijay Pakhrin developed a pretty simple jQuery modal with OAuth login buttons for Facebook and Google.
Many websites support direct login like this but most of them also let you sign up with a regular username/email. And that’s what the third button does.
I’m seeing this trend on a lot of websites recently. Give this a shot if you’re working on a site with similar requirements.
For a dynamic approach to login modals, check out this snippet created by Marin Begovic.
The full modal window drops down onto the page from above and uses CSS3 drop shadow effects to create depth on the page. It also darkens the main page to bring focus right onto the forms.
I like the mild airplane graphic in the background too, although it’s a pretty simple design. The animations are what really sell me on this snippet.
Semantic UI Form
Not to mention that there are no CSS styles to copy since this falls back to the default Semantic stylesheet.
Clean Modal Login
It’s rare to find usable modal windows built on pure CSS. But this example, created by developer Ash Scott, is one of the best I’ve seen.
The modal supports all the typical features you’d expect like a sliding animation, a darkened background and a fading effect whenever you click anywhere outside the box.
Far too many modals don’t hide when clicking the background, which such an annoying experience for the user. It’s also one of the biggest reasons that I recommend this modal window if you’re looking to use a pure CSS alternative.
I mentioned Semantic UI earlier and I couldn’t go through this whole article without suggesting a Bootstrap solution.
Check out this BS3 modal window running on Bootstrap 3.3.6. While it should work with Bootstrap 4, it hasn’t been tested yet.
Developer Anis Nouira built this entire Bootstrap login modal using pure CSS – which is even more impressive.
However, this only offers a single login form. The pen doesn’t include any extra UI for a registration or signup form.
Tabs always improve navigation and they’re incredibly useful to display hidden elements all on the same page.
Check out this tabbed effect built into a lavender-colored modal window. This features both a login and register tab with custom animation effects when switching between the two.
Note that this does use a good amount of jQuery, totaling almost 100 lines of code.
But the effect is fantastic. And, if you alter the colors a bit, this should fit into the design of any website.
Pure CSS Modal
See the Pen Pure CSS Modal window / Login & Sign up / Tabs / All Responsive by Andrew (@WhoIsAndrew) on CodePen.
As you can tell the demo is pretty… blunt. It uses a huge call-to-action to display the modal window and the interface slides into view from the side of the screen.
This animation is brilliant and pretty snappy. And the form inputs have their own animations on focus. It makes for a pretty cool effect and it’s something that’s easy to replicate.
Navbar With Modal Login
Few login windows are the lone element on a page. The majority get integrated into the top navigation bar – which is exactly the design style of this pen.
The animation is really clean, with a super simple UI design. And the whole interface runs on Bootstrap, which is a nice touch (although not required).
One thing that could use improvement is the modal window’s structure. It feels a little small on my widescreen monitor, so it might work better with some breakpoints and responsive design styles.
Panel Modal Login
Last, but certainly not least, is this pen that uses Portuguese for the labels. That shouldn’t stop you from replicating this into another layout, but it does make navigating a bit trickier.
The initial modal window asks if you want to login or sign up for a new account. Then, whatever you pick just appears into view. Simple!
If you like this type of UI/UX flow, then try duplicating this modal for your own project. It’ll take some editing to change the language and styles – but that’s also the case with virtually every pen.
If you’re looking for even more custom modal designs, I recommend checking CodePen to see what else you can find.