Grab and learn
Code editor Setup VScode
Top Navigation Sticky Navbar Hamburger Collapse Columns 2D transforms 3D transforms Normal card Flip card Scrollbar Progressbar Skillbar Alert Jumbotron Forms Popover Tooltip Background overlay Breadcrumbs Toast Radio buttons Text input Range sliders Dropdown Pagination Modals Color picker Icons Tables
Curtain menu Mega menu Toggle sidebar Collapsed sidepanel Full screen navigation Hide navbar on scroll Shrink navbar on scroll Page animation Image magnifier
Hover animations Parallax Scroll animation Scroll down animated icon Auto typer Carousel Animated icons Particles Smooth scroll Text animations Cube animations
Online website
Domain name Hosting SEO structure Crawling Indexing Canonical links Sitemap Robots.txt Google Search Console Google Analytics
Beginners Bootstrap Responsive websites Sass CSS grid CSS flexbox
Vanilla JQuery Page animation Async Javascript AJAX Node.js React JS Express


In case you want to create a pop-up screen with specific information, the modal element can be very handy

Professional examples

The below stated examples are commonly applied in online website designs. The code is available for you and offers you the possibility to edit it to your own creation!

Group Modal

Effect: fancy

See the Pen iziModal - Group Mode by Marcelo Dolza (@dolce) on CodePen.

Simple Modal Animations

Effect: basic

See the Pen Simple Modal Animations by Ben Zvikler (@bzvikler) on CodePen.

Responsive Modal Design

Effect: professional

See the Pen Responsive Modal Design by Ettrics (@ettrics) on CodePen.

AngularJS BootStrap 3 Modal Dialogs

Effect: basic

See the Pen AngularJS BootStrap 3 Modal Dialogs by Michael E Conroy (@m-e-conroy) on CodePen.

Bootstrap 4 Modal Demos

Effect: basic

See the Pen Bootstrap 4 Modal Demos by SitePoint (@SitePoint) on CodePen.

Bootstrap Modal and popover with Velocity.js animation

Effect: fancy

See the Pen Bootstrap Modal and popover with Velocity.js animation by Mike Sozanski (@macsupport) on CodePen.

Basic CSS-Only Modal

Effect: basic

See the Pen Basic CSS-Only Modal by Timothy Long (@timothylong) on CodePen.

Modal Animations

Effect: fancy

See the Pen Modal Animations by Jesse Couch (@designcouch) on CodePen.


Need to learn more about the basics of creating a modal? We recommend you to checkout the examples on Bootstrap.

Learn how to make a modal

The video's below are carefully selected and give you a clear explanation of how you can build this module yourself.

How To Create A Modal In Javascript and CSS - Dev Ed

Today we are going to learn how to create a simple modal in javascript and css. Feel free to edit the modal the way you want. This tutorial does not use Bootstrap or any other css frameworks or javascript frameworks.

Create a Modal With HTML, CSS & JavaScript - Traversy Media

In this video we will be creating a modal from scratch using HTML, CSS and JavaScript. You see these a lot with frameworks like Bootstrap but here we will create our own custom modal.

Build a Popup With JavaScript - Web Dev Simplified

In this video I will cover how to create a simple modal that animates in on button click, and fades out when the modal is closed. This modal is also able to be closed by clicking anywhere outside the modal which is something most tutorial don't cover. Lastly, this modal is setup in a way that it is incredibly easy for you to customize it to the needs of your exact website.

Copyright © 2020