CSS Modal
How do I make an css modal?
What is a css modal? How do you make a css modal? This script and codes were developed by Nicholas M. Smith on 27 August 2022, Saturday.
CSS Modal - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS 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>
<div class="page-wrap"> <a href="#showModal" class="btn wine">SIGN IN</a> <div id="showModal" class="modal-overlay"> <div> <a href="#close" title="Close" class="close">X</a> <h2>Login</h2> <input type="text" placeholder="Username" /> <input type="password" placeholder="Password" /> <input type="submit" value="Login" /> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
CSS Modal - Script Codes CSS Codes
* { box-sizing: border-box;
}
html, body { height: 100%;
}
.page-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.btn { border-radius: 5px; color: white; font-family: 'Helvetica'; letter-spacing: 1px; padding: 20px; text-decoration: none;
}
.wine { background: #b0403f;
}
.modal-overlay { background: rgba(0, 0, 0, 0.8); display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; pointer-events: none; -webkit-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; z-index: 99999;
}
.modal-overlay:target { opacity: 1; pointer-events: auto;
}
.modal-overlay > div { background: #fff; margin: 10% auto; padding: 20px; position: relative; width: 300px;
}
.modal-overlay > div::before { border: 1px solid rgba(255, 255, 255, 0.5); content: ""; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; z-index: -1;
}
.close { color: black; font-weight: bold; line-height: 25px; position: absolute; top: 10px; right: 10px; text-align: center; text-decoration: none; width: 24px;
}
/* form fields */
input { margin: 7px 0; padding: 10px; outline: none; width: 100%;
}
input[type="submit"] { display: block; width: 100px;
}
Developer | Nicholas M. Smith |
Username | icutpeople |
Uploaded | August 27, 2022 |
Rating | 3 |
Size | 2,836 Kb |
Views | 28,336 |
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!
Name | Size |
Animated Image Hovers | 3,687 Kb |
Flexbox Test | 2,486 Kb |
ReactJS Filter | 5,122 Kb |
Social Icon Hover Boxes | 2,790 Kb |
Mobile First Responsive Table | 4,026 Kb |
Loader | 2,786 Kb |
SVG Hand Drawn Navicon | 3,313 Kb |
Button | 2,948 Kb |
CSS 8-Bit Box Shadow DuckTales | 4,376 Kb |
Aside Nav Animated | 3,326 Kb |
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!
Name | Username | Size |
Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
Twitch API | Coderpilot | 3,412 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
E-mail Template | SoloMDFK | 4,871 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
03 - CSS Variables | Run-time | 2,682 Kb |
CSS Piano | Dannystyle | 5,138 Kb |
Lunar eclipse | Ademilter | 2,056 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!