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

8 complementos para convertir su sitio de WordPress a una aplicación móvil

Por cada publicación importante o empresa que ve en línea, puede encontrar una versión móvil del sitio. Ya sea una forma móvil receptiva de la versión de escritorio o una aplicación nativa, tener presencia móvil es un aspecto importante para muchos establecimientos que buscan tener una presencia en línea.De hecho

(Consejos de tecnología y diseño)

El futuro del placer cinematográfico: películas 3D y más

Las películas 3D han existido por más tiempo de lo que la mayoría de la gente piensa. De hecho, han existido por alrededor de un siglo, ¡desde 1915! Hemos visto la creciente popularidad de esta tecnología cinematográfica en la última década y nos hemos dado cuenta de que el reciente resurgimiento no es solo una moda pasajera .La tecn

(Consejos de tecnología y diseño)