Pure CSS Modalbox

Developer
Bryce Snyder
Size
3,264 Kb
Views
44,528
  1. Pure CSS Modalbox Previews
  2. Pure CSS Modalbox HTML Codes
  3. Pure CSS Modalbox CSS Codes
  4. Pure CSS Modalbox JS Codes

How do I make an pure css modalbox?

In light of valentines being around the corner, why not a pure CSS3 modalbox with some love? 'Cause who needs JavaScript these days anywayyyyy!. What is a pure css modalbox? How do you make a pure css modalbox? This script and codes were developed by Bryce Snyder on 28 July 2022, Thursday.

Pure CSS Modalbox Previews
IQ Test

Pure CSS Modalbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Modalbox</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:300|Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="checkbox" id="opener">
<label for="opener">Wanna know something?</label>
<div id="banner"></div><!-- /#banner -->
<div id="modal">	<label for="opener">&#10005;</label>	<i class="fa fa-heart"></i>	<h2>You're Awesome!</h2>	<p>Just thought you should know</p>
</div><!-- /#modal --> <script src="js/index.js"></script>
</body>
</html>

Pure CSS Modalbox - Script Codes CSS Codes

body { background: #f5f7fa; overflow: hidden;
}
body > label { position: absolute; top: 50%; left: 50%; margin-top: -15px; margin-left: -116px; font-family: 'Montserrat', sans-serif; cursor: pointer; padding: 5px 25px; background: #434a54; border-radius: 2px; font-weight: lighter; color: #fff;
}
input[type="checkbox"] { display: none;
}
input[type="checkbox"]:checked ~ #banner,
input[type="checkbox"]:checked ~ #modal { display: block;
}
#banner { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #da4453; z-index: 0;
}
#modal { position: absolute; display: none; left: 50%; top: 50%; width: 400px; height: 200px; margin-left: -200px; margin-top: -100px; text-align: center; border-radius: 2px; border: 1px solid #ddd; background: #fff; color: #424242; -webkit-animation: fall-in 0.35s; -moz-animation: fall-in 0.35s; -o-animation: fall-in 0.35s; animation: fall-in 0.35s;
}
#modal label { position: absolute; top: -6px; right: -6px; display: flex; justify-content: center; align-items: center; width: 15px; height: 15px; border-radius: 50%; color: #fff; background: #434a54; font-size: 8px; cursor: pointer;
}
#modal i { margin-top: 20px; color: #da4453; font-size: 5em; text-shadow: 0px 4px #e6e9ed;
}
#modal h2 { margin-bottom: 5px; font-family: 'Montserrat', sans-serif; font-weight: lighter;
}
#modal p { padding: 0; margin: 0; font-size: 10px; font-family: 'open sans', sans-serif; color: #ccc;
}
@-moz-keyframes fall-in { 0% { -ms-transform: scale(3, 3); -webkit-transform: scale(3, 3); transform: scale(3, 3); opacity: 0; } 50% { -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; } 60% { -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
@-webkit-keyframes fall-in { 0% { -ms-transform: scale(3, 3); -webkit-transform: scale(3, 3); transform: scale(3, 3); opacity: 0; } 50% { -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; } 60% { -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
@-o-keyframes fall-in { 0% { -ms-transform: scale(3, 3); -webkit-transform: scale(3, 3); transform: scale(3, 3); opacity: 0; } 50% { -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; } 60% { -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
@keyframes fall-in { 0% { -ms-transform: scale(3, 3); -webkit-transform: scale(3, 3); transform: scale(3, 3); opacity: 0; } 50% { -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; } 60% { -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}

Pure CSS Modalbox - Script Codes JS Codes

// pure css, love.
Pure CSS Modalbox - Script Codes
Pure CSS Modalbox - Script Codes
Home Page Home
Developer Bryce Snyder
Username brycesnyder
Uploaded July 28, 2022
Rating 4.5
Size 3,264 Kb
Views 44,528
Do you need developer help for Pure CSS Modalbox?

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!

Bryce Snyder (brycesnyder) Script Codes
Name
Simple JQuery Slider
Dynamic Material Boxes
Pure CSS Radio Buttons Pseudo Checked Cards
A Pen by Bryce Snyder
Pure CSS3 Viking Mace
Social Media Animated Buttons
Pseudo data attribute CSS manipulations to create a dynamic feed.
PURE CSS3 RIBBON
Pure CSS3 Parallax Menu
Checkbox Only Dynamic Menu Layout
Create amazing blog posts 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!