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

Android Exploit "Cloak & Dagger" puede robar tu contraseña y más

Los usuarios de Android pueden querer observar de cerca las aplicaciones que descargan en sus dispositivos, ya que los investigadores han descubierto una serie de vulnerabilidades en el sistema operativo que dependen de dos permisos particulares de Android para funcionar .Apodado Cloak & Dagger por el equipo de investigación que descubrió la vulnerabilidad, el ataque se basa en abusar de los SYSTEM_ALERT_WINDOW y BIND_ACCESSIBILITY_SERVICE para poner en peligro el sistema.

(Consejos de tecnología y diseño)

15 mejores herramientas de emparejamiento de fuentes para diseñadores

El emparejamiento de fuentes es un proceso esencial de cualquier diseño web . Si desea crear un buen diseño de sitio web, debe poder tomar decisiones como elegir la fuente correcta, el esquema de color e incluso el tema correcto de WordPress. Para quienes buscan fuentes, las herramientas de tipografía web son su fuente de referencia. P

(Consejos de tecnología y diseño)