Slide 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>Slide Modal</title> <style> body { font-family: 'Arial', sans-serif; background-color: #f0f2f5; 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: #fff; border-radius: 12px; padding: 20px; max-width: 500px; width: 90%; text-align: center; position: relative; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); animation: slideIn 0.5s ease-out forwards; } @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; 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 #eee; } .modal-footer button { background-color: #007bff; 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: #0056b3; } .open-modal-btn { padding: 15px 30px; font-size: 18px; color: white; background-color: #17a2b8; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .open-modal-btn:hover { background-color: #138496; } </style> </head> <body> <button class="open-modal-btn" onclick="openModal()">Open Slide Modal</button> <div class="modal-wrapper" id="modal-wrapper"> <div class="modal"> <div class="modal-header"> <h2>Slide In! 🎢</h2> <span class="close" onclick="closeModal()">×</span> </div> <div class="modal-body"> <p>Enjoy the smooth slide effect! 🌊</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>