A Pen by Gigaleet

Developer
Gigaleet
Size
2,535 Kb
Views
8,096
  1. A Pen by Gigaleet Previews
  2. A Pen by Gigaleet HTML Codes
  3. A Pen by Gigaleet CSS Codes
  4. A Pen by Gigaleet JS Codes

How do I make an a pen by gigaleet?

What is a a pen by gigaleet? How do you make a a pen by gigaleet? This script and codes were developed by Gigaleet on 08 January 2023, Sunday.

A Pen by Gigaleet Previews
IQ Test

A Pen by Gigaleet - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Gigaleet</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <div class="modal-header"> <span class="close">&times;</span> <h2>Modal Header</h2> </div> <div class="modal-body"> <p>Some text in the Modal Body</p> <p>Some other text...</p> </div> <div class="modal-footer"> <h3>Modal Footer</h3> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Gigaleet - Script Codes CSS Codes

/* The Modal (background) */
.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; width: 80%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1}
}
@keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1}
}
/* The Close Button */
.close { color: white; float: right; font-size: 28px; font-weight: bold;
}
.close:hover,
.close:focus { color: #000; text-decoration: none; cursor: pointer;
}
.modal-header { padding: 2px 16px; background-color: #5cb85c; color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer { padding: 2px 16px; background-color: #5cb85c; color: white;
}

A Pen by Gigaleet - Script Codes JS Codes

// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() { modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() { modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; }
}
A Pen by Gigaleet - Script Codes
A Pen by Gigaleet - Script Codes
Home Page Home
Developer Gigaleet
Username Gigaleet
Uploaded January 08, 2023
Rating 3
Size 2,535 Kb
Views 8,096
Do you need developer help for A Pen by Gigaleet?

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!

Gigaleet (Gigaleet) Script Codes
Name
CSS placeholder labels
Status Loader
Light Box
FlexBox Fixed Left Side Bar and Header Layout
Modern Login Box
Pure CSS Hamburger Button
Modal Dialog
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!