|
To create a popup form using JavaScript, you can design a hidden overlay that becomes visible when triggered. We will use HTML for form elements, CSS for styling, and JavaScript to toggle the visibility of the overlay. This allows for a user-friendly and interactive way to display forms on your webpage without cluttering the main content.
Preview
Approach- Create the basic HTML structure with a button to trigger the popup and a hidden overlay containing the form.
- Style the overlay and form using CSS, ensuring a visually appealing and responsive design.
- Write JavaScript functions, “openPopup” and “closePopup”, to toggle the visibility of the overlay when the button is clicked.
- Implement form fields and validation within the overlay, ensuring a seamless user experience.
- Integrate the HTML, CSS, and JavaScript to create a functional and aesthetically pleasing popup form on your webpage.
Example: Implementation to design popup from.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Popup Form</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.btn-open-popup {
padding: 12px 24px;
font-size: 18px;
background-color: green;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn-open-popup:hover {
background-color: #4caf50;
}
.overlay-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.popup-box {
background: #fff;
padding: 24px;
border-radius: 12px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
width: 320px;
text-align: center;
opacity: 0;
transform: scale(0.8);
animation: fadeInUp 0.5s ease-out forwards;
}
.form-container {
display: flex;
flex-direction: column;
}
.form-label {
margin-bottom: 10px;
font-size: 16px;
color: #444;
text-align: left;
}
.form-input {
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
width: 100%;
box-sizing: border-box;
}
.btn-submit,
.btn-close-popup {
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-submit {
background-color: green;
color: #fff;
}
.btn-close-popup {
margin-top: 12px;
background-color: #e74c3c;
color: #fff;
}
.btn-submit:hover,
.btn-close-popup:hover {
background-color: #4caf50;
}
/* Keyframes for fadeInUp animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Animation for popup */
.overlay-container.show {
display: flex;
opacity: 1;
}
</style>
</head>
<body>
<button class="btn-open-popup" onclick="togglePopup()">
Open Popup Form
</button>
<div id="popupOverlay"
class="overlay-container">
<div class="popup-box">
<h2 style="color: green;">Popup Form</h2>
<form class="form-container">
<label class="form-label"
for="name">
Username:
</label>
<input class="form-input" type="text"
placeholder="Enter Your Username"
id="name" name="name" required>
<label class="form-label" for="email">Email:</label>
<input class="form-input"
type="email"
placeholder="Enter Your Email"
id="email"
name="email" required>
<button class="btn-submit"
type="submit">
Submit
</button>
</form>
<button class="btn-close-popup"
onclick="togglePopup()">
Close
</button>
</div>
</div>
<script>
function togglePopup() {
const overlay = document.getElementById('popupOverlay');
overlay.classList.toggle('show');
}
</script>
</body>
</html>
Output:
|
