Ventana modal con dialog
Problema:
Una ventana modal para mostrar contenido ppor encima superpuesta a la página web.
Una ventana modal puede servirnos para mostrar avisos (como alert) o para mostrar imágenes (seria una lightbox), mostrar un formulario...
Se caracteriza porque al abrir ocupa la ventana del navegador y éste no puede usarse hasta que se cierra la ventana. La ventana modal toma toda la atención.
¿Como se puede hacer esta ventana modal con Javascript?
Solución
Aprovechamos el elemento dialog de HTML
HTML 5 proporciona un elemento nuevo denominado dialog, que se puede usar como una ventana de avisos normal o en fomra modal.
Este elemento se implementa en Javascript como un objeto dialog con métodos open(), close() y showModal(). Y como prpiedades open (visible o no) y returnValue, usado como valor devuelto si se usa un form dentro del elemento.
Lógicamente la acción de abrir la ventana provendrá de un enlace o algún evento.
Ejemplo
En este ejemplo se usa un dialog de HTML para hacer una pregunta, el botón que se pulse guarda su value en el objeto dialog, en la propiedad returnValue.
Por supuesto si quires que quede bonito le puedes aplicar CSS.
<style>
#cerrar{
display: inline-block;
cursor: pointer;
}
#abrir{cursor:pointer}
</style>
</head>
<body>
<dialog id="dlg">
<p>Buenas tardes ¿salir o seguir?</p>
<form method="dialog">
<button type="submit" id="cerrar" value="Cancel">Salir</button>
<button type="submit" id="abort" value="OK">Seguir</button>
</form>
</dialog>
<button id="abrir">Abrir ventana</button>
<script>
document.getElementById('abrir').addEventListener('click',abrir);
document.getElementById('dlg').addEventListener('close', cerrar);
function abrir(){
let obj = document.getElementById('dlg');
obj.showModal()
}
function cerrar(){
console.log(event.currentTarget.returnValue);
}
</script>