Modal With Close Button
Home
Snippets
Modal With Close Button
HTML
CSS
JS
<dialog id="modal-1" class="modal" open> <form class="modal__controls" method="dialog"> <button type="submit" class="modal__action" aria-label="close"> </button> </form> <div class="modal__body"> <h2>Not important</h2> <p>Juste close me!</p> </div> </dialog>
:root { font-family: system-ui; background: linear-gradient(90deg, #004abf, #815885); } .modal { margin: 5rem auto; border: 3px solid currentcolor; background: white; border-radius: 1rem; padding: 1rem 4rem 2rem 2rem; border-top-right-radius: 2.3rem; position: relative; font-size: 1.2rem; } .modal__controls { position: absolute; right: 0; top: 0; transform: translate(50%, -50%); } .modal__action { background: none; border: 0; cursor: pointer; aspect-ratio: 1 / 1; border-radius: 50%; border: 3px solid currentcolor; background: white; width: 3rem; display: block; font: inherit; color: inherit; } .modal__action:after { content: "✕"; font-size: 1.5rem; }
//javascript
Ad #1
Ad #2
Scroll to Top