CSS Only Modal

Developer
Matt Shull
Size
1,815 Kb
Views
26,312
  1. CSS Only Modal Previews
  2. CSS Only Modal HTML Codes
  3. CSS Only Modal CSS Codes

How do I make an css only modal?

CSS only modals.. What is a css only modal? How do you make a css only modal? This script and codes were developed by Matt Shull on 28 September 2022, Wednesday.

CSS Only Modal Previews
IQ Test

CSS Only Modal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Only Modal</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="#modal1" class="modalLink">First Modal</a>
<a href="#modal2" class="modalLink">Second Modal</a>
<a href="#modal3" class="modalLink">Third Modal</a>
<article id="modal1" class="modal"> First Modal <a href="#" class="closeLink">Close</a>
</article>
<article id="modal2" class="modal"> Second Modal <a href="#" class="closeLink">Close</a>
</article>
<article id="modal3" class="modal"> Third Modal <a href="#" class="closeLink">Close</a>
</article>
</body>
</html>

CSS Only Modal - Script Codes CSS Codes

body { background-color:#bdc3c7;
}
.modalLink { text-decoration:none; color:white; background-color:#e74c3c; padding:15px; border-radius:5px;
}
.closeLink { display:block; position:absolute; bottom:10px; padding:10px 20px; color:#d35400; background-color:#f1c40f; text-decoration:none; border-radius:5px;
}
.modal:target { display:block; top:0px; -webkit-animation: showModal .7s; /* Chrome, Safari, Opera */ animation: showModal .7s;
}
.modal { position:fixed; height:400px; width:350px; background-color:#3498db; color:black; left:calc(50% - 185px); padding:20px; top:-440px;
}
@-webkit-keyframes showModal { from {top:-440px;} to {top:0;}
}
@keyframes showModal { from {top:-440px;} to {top:0;}
}
CSS Only Modal - Script Codes
CSS Only Modal - Script Codes
Home Page Home
Developer Matt Shull
Username derekshull
Uploaded September 28, 2022
Rating 3
Size 1,815 Kb
Views 26,312
Do you need developer help for CSS Only Modal?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matt Shull (derekshull) Script Codes
Name
SPP Mainpage
Peter Miller Wireframe
Angular 2-way Data Binding Example
Template Style Prototype
Angular Responsive Select Box
San Jose Business Listings
Tri-Cities Interior Wireframe
Shopping List Example
CSS Only Parallax
San Jose Services Wireframe
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!