Modal window clean css
How do I make an modal window clean css?
Modal window via css vs jquery. What is a modal window clean css? How do you make a modal window clean css? This script and codes were developed by Serluck on 02 September 2022, Friday.
Modal window clean css - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modal window clean css</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="modal-content" id="modal-holder"> <h1 id="modal-title">Modal Title</h1> <form> <label for="name">Name:</label> <input type="text" id="name" class="input" placeholder="Gimmie ur Name"> <label for="email">Email:</label> <input type="email" id="email" class="input" placeholder="Gimmie ur Email"> <input type="submit" class="btn" value="Submit Form"> </form> <div class="btn-close" id="modal_close" type="button"> X </div> </div> <!-- end .modal-content -->
<div class="modal-overlay" id="modal-dialog"></div>
<button class="btn" id="btn">Modal</button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Modal window clean css - Script Codes CSS Codes
* { padding: 0; margin: 0;
}
.modal-overlay { display:none; position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.8)
}
.modal-content { display: none; width: 40%; margin-left: 150px; padding: 0; position: absolute; top: 50px; background: #ddd; box-shadow:1px 1px 3px #000; z-index: 100;
}
.show { display: block;
}
.modal-content.show + #modal-dialog { display: block;
}
Modal window clean css - Script Codes JS Codes
(function(){ var loginPopup = $('#modal-holder');
$('#btn').on('click', function(event){ loginPopup.toggleClass('show'); }); $('#modal-dialog').on('click', function() {
loginPopup.removeClass('show'); }); $('#modal_close').on('click', function() {
loginPopup.removeClass('show'); }); }());
Developer | Serluck |
Username | serluk |
Uploaded | September 02, 2022 |
Rating | 3 |
Size | 2,102 Kb |
Views | 40,480 |
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 |
Sticky footer absolute | 1,510 Kb |
A Pen by Serluck | 2,832 Kb |
Transfer product to cart | 2,033 Kb |
Price table | 5,928 Kb |
Toggle menu without height css3 | 1,570 Kb |
Triangle on pure css3 | 1,408 Kb |
Custom list style via clean css | 3,772 Kb |
Sticky on scroll jquery | 1,581 Kb |
Css text gradient | 1,833 Kb |
Custom checkbox | 1,581 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 |
Tic Tac Toe | Volv | 4,862 Kb |
Clock with full screen background | Owebboy | 2,415 Kb |
CSS Piano | Dannystyle | 5,138 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
Console fun | Dviate | 1,500 Kb |
SVG Animation | Pollardld | 3,133 Kb |
Display properties | Hamzaerbay | 1,886 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
TimelineMax Circular loader | Nicolund | 2,649 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!