<!DOCTYPE html> <html lang="en"> <head> <title>Modal - Example</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> html, body { margin: 0; padding: 0; } * { box-sizing: border-box; } .container { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; width: 100%; height: 100%; position: fixed; } .button-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .button { background-color: #ec4899; color: #fff; border: none; padding: 10px 20px; text-transform: uppercase; font-weight: 700; cursor: pointer; border-radius: 3px; } .modal-container { border-radius: 5px; width: 23.5rem; display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; } .modal-title { text-transform: capitalize; padding: 0 1.3rem; } .modal-body { border-top: 0.1px solid rgba(108, 105, 105, 0.212); border-bottom: 0.1px solid rgba(108, 105, 105, 0.212); padding: 2rem 1.3rem; line-height: 1.7; font-size: 1.1rem; color: rgb(97, 94, 94); } .modal-button-container { display: flex; justify-content: flex-end; padding: 0 1.3rem; padding-bottom: 2rem; gap: 0.2rem; } .close { color: red; border: none; border-radius: 3px; padding: 15px 20px; text-transform: uppercase; font-weight: 700; font-size: 0.85rem; background-color: transparent; cursor: pointer; } .save-changes { background-color: #50c878; color: white; border: none; border-radius: 3px; padding: 15px 20px; text-transform: uppercase; font-weight: 700; font-size: 0.85rem; cursor: pointer; } @media screen and (max-width: 340px) { .modal-container { width: 17rem; } } </style> </head> <body> <div class="container" id="container"> <div class="button-container"> <button type="button" class="button" id="toggle-button"> open space modal </button> </div> <div class="modal-container" id="modal-box"> <h1 class="modal-title">modal title</h1> <p class="modal-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae minima doloremque distinctio totam quos quasi, sequi soluta cupiditate vero ratione quo ipsa excepturi id commodi iusto, dolorum ducimus voluptatum aut cum sint quod repudiandae! Minima rem similique rerum ea nemo? </p> <div class="modal-button-container"> <button type="button" class="close" id="close">close</button> <button type="button" class="save-changes" id="save-changes"> save changes </button> </div> </div> </div> <script> const container = document.getElementById('container'); const toggleButton = document.getElementById('toggle-button'); const modal = document.getElementById('modal-box'); const closeButton = document.getElementById('close'); const saveButton = document.getElementById('save-changes'); function toggleModal() { modal.style.display = 'block'; document.body.style.backgroundColor = 'rgba(108, 105, 105, 0.212)'; } function closeModal() { modal.style.display = 'none'; document.body.style.backgroundColor = 'transparent'; } window.addEventListener('click', (e) => { if (e.target.classList.contains('container')) { closeModal(); } }); modal.addEventListener('click', closeModal); saveButton.addEventListener('click', closeModal); closeButton.addEventListener('click', closeModal); toggleButton.addEventListener('click', toggleModal); </script> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter