Crear una ventana modal fácilmente con el cuadro de diálogo HTML5

Hola Mundo! 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!
Salida 
 Mostrar cuadro de diálogo 

Pero tenga en cuenta que cuando lo ve en Chrome (que es el único navegador que admite esta etiqueta en este momento), la ventana de diálogo está oculta. Y dada la estructura HTML anterior, solo veremos el botón Mostrar cuadro de diálogo. Para mostrar la ventana de diálogo, podemos usar su API de JavaScript .show() y usar .close() para ocultarla.

 (function () {var dialog = document.getElementById ('window'); document.getElementById ('show'). onclick = function () {dialog.show ();}; document.getElementById ('exit'). onclick = function () {dialog.close ();};}) (); 

Haga clic en el botón "Mostrar cuadro de diálogo" y la ventana de diálogo aparecerá en el medio de la ventana del navegador.

Podemos personalizar la ventana de diálogo a través de CSS. Por defecto, la ventana de diálogo cubre todo el espacio horizontal en el navegador. Entonces, especifiquemos el ancho, como tal.

 diálogo {ancho: 500px; } 

Además,

elemento viene con un nuevo pseudo-elemento llamado ::backdrop . Se usa para dar un estilo a ese fondo oscuro típico que comúnmente encontramos detrás de una ventana de diálogo. Permite a los visitantes enfocarse más en el diálogo y esconder todo lo demás detrás de él. No parece estar funcionando en este momento, pero será compatible en el futuro.

Conclusión

HTML ha evolucionado mucho en los últimos años. Ya no es solo para construir una página web, incluso ahora podemos construir una interfaz de usuario interactiva con nuevos elementos HTML como

junto con JavaScript API. Tenga en cuenta que este elemento es experimental, aún no está listo para la producción y solo funciona en Chrome con las características experimentales habilitadas en la página chrome://flags .

• Ver demostración
• Descargar Fuente

Recursos para el Día de San Valentín: 20 juegos de iconos para ponerte en el estado de ánimo

¡El amor está en el aire! ¡El Día de San Valentín está a la vuelta de la esquina y es un momento perfecto para compartir el amor con increíbles regalos! Lo que tenemos para ti hoy es una compilación de 20 conjuntos de iconos del Día de San Valentín que puedes descargar gratis .Desde corazones hasta osos de peluche y dulces, pasando por botellas de vino, seguramente recogerás algunos iconos de la lista que se adaptarán a cualquier sensación o atmósfera que desees alcanzar, todo en el espíritu del Día de San Valentín, por supuesto.Puede utilizar e

(Consejos de tecnología y diseño)

Obsequio: elementos de infografía "Negocios modernos"

El panorama de los negocios cambia constantemente y también la tecnología y las técnicas de marketing involucradas. Muchas más empresas están utilizando el poder de la infografía para llegar realmente a su mercado objetivo.Si eres un diseñador que trabaja para empresas de todas las formas y tamaños, es probable que hayas obtenido algunos vectores gratuitos, archivos PSD y elementos similares de Freepik. Despué

(Consejos de tecnología y diseño)