Fade Zoom Modal - 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>Fade Zoom Modal</title> <style> body { font-family: 'Arial', sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } .modal-wrapper { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 1000; } .modal { background: #ffffff; border-radius: 12px; padding: 20px; max-width: 500px; width: 90%; text-align: center; position: relative; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); animation: fadeZoomIn 0.6s; } @keyframes fadeZoomIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; padding-bottom: 10px; } .modal-header h2 { margin: 0; font-size: 24px; color: #333; } .modal-header .close { font-size: 24px; cursor: pointer; color: #999; transition: color 0.3s; } .modal-header .close:hover { color: #333; } .modal-body { padding: 20px 0; } .modal-body p { margin: 0; font-size: 18px; color: #555; } .modal-footer { display: flex; justify-content: flex-end; padding-top: 10px; border-top: 1px solid #ddd; } .modal-footer button { background-color: #3f51b5; color: white; border: none; padding: 10px 20px; font-size: 16px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .modal-footer button:hover { background-color: #303f9f; } .open-modal-btn { padding: 15px 30px; font-size: 18px; color: white; background-color: #3f51b5; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .open-modal-btn:hover { background-color: #303f9f; } </style> </head> <body> <button class="open-modal-btn" onclick="openModal()">Open Fade Zoom Modal</button> <div class="modal-wrapper" id="modal-wrapper"> <div class="modal"> <div class="modal-header"> <h2>Fade & Zoom In! 🌟</h2> <span class="close" onclick="closeModal()">×</span> </div> <div class="modal-body"> <p>Enjoy the smooth transition! 🌈</p> </div> <div class="modal-footer"> <button onclick="closeModal()">Close</button> </div> </div> </div> <script> function openModal() { document.getElementById('modal-wrapper').style.display = 'flex'; } function closeModal() { document.getElementById('modal-wrapper').style.display = 'none'; } </script> </body> </html>