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 (cmo alert) o para mostrar imágenes (seria una lightbox), mostrar un formualrio...

Se caracteriza orque al abrir ocupa todo la ventana del navegador que no puede usarse hasta que se cierra la ventana.

¿Como se puede hacer 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 apertura deberá ir colocada en un enlace o vinculada a un evento.

Ejemplo

En este ejemplo se usa un dialog 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>

scripts