Shake 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>Shake Modal</title> <style> body { font-family: 'Arial', sans-serif; background-color: #fafafa; 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: shake 0.6s; } @keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } .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: #673ab7; 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: #512da8; } .open-modal-btn { padding: 15px 30px; font-size: 18px; color: white; background-color: #673ab7; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .open-modal-btn:hover { background-color: #512da8; } </style> </head> <body> <button class="open-modal-btn" onclick="openModal()">Open Shake Modal</button> <div class="modal-wrapper" id="modal-wrapper"> <div class="modal"> <div class="modal-header"> <h2>Shake It! 🚀</h2> <span class="close" onclick="closeModal()">×</span> </div> <div class="modal-body"> <p>Feel the shake! 🌪️</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>