El elemento <dialog> ahora es compatible con todos los navegadores (desde marzo de 2022 ).
Lo probé hoy y me familiaricé con:
HTML
<dialog>JavaScript
.show().showModal().close()CSS
::backdropTodo parece sencillo, pero lo único que no he podido lograr hasta ahora es: atenuar el fondo .
Por ejemplo, si quiero que el color final del fondo sea:
background-color: rgba(0, 0, 63, 0.8); pero haga que transition (o animate ) a ese background-color desde:
background-color: rgba(0, 0, 0, 0);¿Es esto posible?
Aquí está mi ejemplo (que no funciona):
const myButton = document.querySelector('button'); const myDialog = document.querySelector('dialog'); const requestDialog = () => { myDialog.showModal(); setTimeout(() => myDialog.classList.add('fadeUp'), 400); } myButton.addEventListener('click', requestDialog, false); body { display: flex; justify-content: center; align-items: center; height: 180px; } button { position: absolute; top: 6px; left: 6px; cursor: pointer; } dialog::backdrop { background-color: rgba(0, 0, 0, 0); transition: backgroundColor 0.6s ease-out; } dialog.fadeUp::backdrop { background-color: rgba(0, 0, 63, 0.8); } <button type="button">Click me to<br />Request Dialog</button> <dialog> <h2>My Dialog</h2> </dialog>¡La respuesta de G-Cyrillus es casi perfecta! Acabo de agregar el uso de max a box-shadow para que la sombra cubra los dispositivos móviles.
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);Si usa una box-shadow , podría funcionar y estar lo suficientemente cerca de lo que intenta hacer:
dialog { box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0); transition: 2s ease-out; } dialog.fadeUp { box-shadow: 0 0 0 100vw rgba(0, 0, 63, 0.8); transition: 2s ease-out; }Yo estaba teniendo el mismo problema, pero esto me resolvió.
const dialog = document.querySelector('.modal') function openModal() { dialog.showModal(); // default dialog method } function closeModal() { dialog.classList.add('close'); // run animation here dialog.addEventListener('animationend', () => { dialog.classList.remove('close') dialog.close(); // then run the default close method }, {once : true}); // add this to prevent bugs when reopening the modal } .modal { display: none; } /* when the dialog is open by its default method it adds a open tag on the element */ .modal[open] { display: flex; } .modal[open]::backdrop { animation: backdrop-fade 2s ease forwards; } .modal.close::backdrop { animation: backdrop-fade 3s ease backwards; animation-direction: reverse; } @keyframes backdrop-fade { from { background: transparent; } to{ background: rgba(0,0,0); } } <button onclick="openModal()">open modal</button> <dialog class="modal"> <button onclick="closeModal()">close modal</button> </dialog>