<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Popup Example</title>
<style>
/* Styling for the “Email Us” button */
.btn-link {
background-color: #5c9dc8;
color: white;
padding: 15px 40px;
font-size: 1.2rem;
border-radius: 30px;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s ease;
}
.btn-link:hover {
background-color: #417a9b;
}
/* Popup Overlay */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: none; /* Hidden by default */
justify-content: center;
align-items: center;
z-index: 9999;
}
/* Popup Content */
.popup-content {
background-color: white;
padding: 30px;
max-width: 500px;
width: 100%;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
position: relative;
}
/* Close Button */
.popup-content .close-btn {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
}
/* Fade-in animation */
.popup-content.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
</style>
</head>
<body>
<!– Contact Us Section –>
<section class=”contact-us”>
<h2>Contact Us 📞</h2>
<p>If you have any questions or need assistance, don’t hesitate to get in touch!</p>
<a href=”javascript:void(0)” class=”btn-link” onclick=”showPopup()”>
<i class=”fas fa-envelope”></i> Email Us
</a>
</section>
<!– Popup Overlay –>
<div class=”popup-overlay” id=”popupOverlay”>
<div class=”popup-content fade-in”>
<button class=”close-btn” onclick=”hidePopup()”>✖</button>
<h2>Email Us</h2>
<p>Please fill out the form below to send us an email.</p>
<!– Example form inside popup –>
<form action=”submit.php” method=”POST”>
<div class=”form-group”>
<label for=”name”>Your Name</label>
<input type=”text” id=”name” name=”name” required>
</div>
<div class=”form-group”>
<label for=”email”>Your Email</label>
<input type=”email” id=”email” name=”email” required>
</div>
<div class=”form-group”>
<label for=”message”>Message</label>
<textarea id=”message” name=”message” rows=”5″ required></textarea>
</div>
<button type=”submit” class=”btn-link”>Send Email</button>
</form>
</div>
</div>
<!– JavaScript for Popup Control –>
<script>
// Function to show the popup
function showPopup() {
document.getElementById(‘popupOverlay’).style.display = ‘flex’;
}
// Function to hide the popup
function hidePopup() {
document.getElementById(‘popupOverlay’).style.display = ‘none’;
}
</script>
</body>
</html>
