1

quiero que detras de un dialog se coloque un fondo opaco, ejemplo, que se vea de color negro con opacidad al 50%, sin embargo, he usado ya backdrop pero no me funciona. A continuacion dejo el codigo css y html, uso el navegador chrome asi que no creo que sea problema de compatibilidad (si necesito colocar los estilos adicionales del dialog me hacen saber, por favor).

HTML

<body>
    <dialog open id='dupdate' class='dialogs'>
        <img src="./img/checkgreen.webp" width = '120px'>
        Datos actualizados correctamente<br>
        <button onClick='this.parentElement.close()'> Aceptar </button>
    </dialog>
</body>

CSS

dialog::backdrop {
    background: black;
}

1 respuesta 1

1

El elemento dialog tienes 2 modos:

1) Modo: solo dialogo

Solo abre una ventana flotante (sin backdrop), puedes acceder a los elementos que quedan en el fondo. Parar abrir la ventana tienes 2 opciones

  • Mediante HTML, agregando el atributo open
  • Mendiante Javascript, utilizando la función show()

Tu estas abriendo el modal utilizando este modo

1) Modo: dialogo modal

El modo modal es una ventana flotante que impide interactuar con los elementos del fondo (tiene backdrop), similar a las tipicas ventanas de alertas que no te dejan continuar si presionar "aceptar"

Para abrir el dialogo en este modo, solo hay una alternativa y es utilizar la función showModal() en javascript


Por otro lado, si tú quieres que el color sea transparente, evidentemente este código background: black; no lo hará. Puedes usar #0000007f o alguna otra función de css

// Este código sirve para que el modal se abra al inicio

document.addEventListener("DOMContentLoaded", () => document.getElementById('dupdate').showModal());
dialog::backdrop {
    background: color-mix(in srgb, black 50%, transparent);
}
<body>
    <dialog id='dupdate' class='dialogs'>
        <img src="./img/checkgreen.webp" width = '120px'>
        Datos actualizados correctamente<br>
        <button onClick='this.parentElement.close()'> Aceptar </button>
    </dialog>
</body>

<button onclick="dupdate.showModal()">abrir</button>

5
  • Hola, gracias. Lo del show modal lo hago en un archivo externo de js debido a que el dialog es imprimido en php cuando un registro es subido a la bd, por ello no puedo poner directamente lo del onclick pues necesito validar.
    – Ji Mena
    Commented el 17 oct. a las 23:34
  • este es el php if ($query) { echo "<dialog open id='dupdate' class='dialogs'> <img src='./img/checkgreen.webp' width = '120px'> Datos actualizados correctamente<br> <button onClick='this.parentElement.close()'> Aceptar </button> </dialog>"; } y este el js const dialogupdate = document.querySelector('#dupdate'); dialogupdate.addEventListener('click', ()=>{ const alerta = document.querySelector('#dupdate'); alerta.showModal(); })
    – Ji Mena
    Commented el 17 oct. a las 23:35
  • @JiMena No entiendo tu problema, el onclick es solo un ejemplo, lo importante es el dupdate.showModal() que lo puedes poner donde quieras, tal como te mostré en el otro ejemplo del DOMContentLoaded. El punto central de tu pregunta al backdrop y tal como te expliqué, no puedes utilizar el atributo open en el HTML, porque de esa manera lo abre sin backdrop
    – Yussef
    Commented el 18 oct. a las 2:19
  • una disculpa por las malas explicaciones, pero tras analizar mis codigos y tu ayuda he podido lograr lo que queria :), muchas gracias por la ayuda
    – Ji Mena
    Commented el 18 oct. a las 3:43
  • @JiMena Nada que disculpar. Me alegro mucho de que hayas podido solucionar el problema! Saludos
    – Yussef
    Commented el 18 oct. a las 11:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.