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: