Tech Popup - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tech Popup - Ecommerce Popup</title> <style> body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background: #f4f4f4; } .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s; } .popup-overlay.active { visibility: visible; opacity: 1; } .popup-container { background: #fff; padding: 20px; border-radius: 10px; text-align: center; width: 90%; max-width: 400px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); transform: scale(0); transition: transform 0.5s; } .popup-container.active { transform: scale(1); } .popup-header { display: flex; justify-content: space-between; align-items: center; } .popup-header h2 { margin: 0; font-size: 1.5em; color: #333; } .popup-header .close-btn { background: none; border: none; font-size: 1.5em; cursor: pointer; color: #333; } .popup-content { margin-top: 20px; font-size: 1em; color: #666; } .popup-content p { margin: 0; } .popup-content .emoji { font-size: 2em; } .popup-footer { margin-top: 20px; } .popup-footer .btn { display: inline-block; background: #007BFF; color: #fff; padding: 10px 20px; border-radius: 5px; text-decoration: none; transition: background 0.3s; } .popup-footer .btn:hover { background: #0056b3; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .bounce { animation: bounce 2s infinite; } </style> </head> <body> <div class="popup-overlay" id="popupOverlay"> <div class="popup-container" id="popupContainer"> <div class="popup-header"> <h2>Special Offer 🎉</h2> <button class="close-btn" id="closeBtn">×</button> </div> <div class="popup-content"> <p class="emoji bounce">🔥</p> <p>Get 50% off on your first purchase!</p> </div> <div class="popup-footer"> <a href="#" class="btn">Shop Now</a> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const popupOverlay = document.getElementById('popupOverlay'); const popupContainer = document.getElementById('popupContainer'); const closeBtn = document.getElementById('closeBtn'); // Show the popup after 3 seconds setTimeout(() => { popupOverlay.classList.add('active'); popupContainer.classList.add('active'); }, 3000); // Close the popup closeBtn.addEventListener('click', () => { popupOverlay.classList.remove('active'); popupContainer.classList.remove('active'); }); // Close the popup when clicking outside the container popupOverlay.addEventListener('click', (e) => { if (e.target === popupOverlay) { popupOverlay.classList.remove('active'); popupContainer.classList.remove('active'); } }); }); </script> </body> </html>