es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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

La ventana modal es una de las IU más comunes que podemos encontrar en los sitios web. Se usa comúnmente para llevar un formulario de suscripción, cargar formularios (como el de WordPress), mostrar notificaciones y otras formas de llamar la atención de un visitante sobre algo importante.

Todo este tiempo, usamos el plugin jQuery como jQuery UI Dialog, Twitter Bootstrap Modal o Popeasy para crear uno. Pero HTML5 ha introducido una nueva etiqueta llamada

eso nos permite crear una ventana modal nativa de una manera mucho más fácil.

Usar el elemento de diálogo

Utilizando el

elemento es lo mismo que cómo usamos otros elementos HTML. Simplemente agregamos el contenido que queremos mostrar en la ventana de diálogo, como tal.

Hola Mundo!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!

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

Cómo crear una página de inicio de sesión de WordPress completamente personalizada

Cómo crear una página de inicio de sesión de WordPress completamente personalizada

Muchos de ustedes, creo, están familiarizados con la página de inicio de sesión de WordPress en wp-login.php . Se ve bien, y funciona bien. Pero cuando se trata de crear un sitio web para clientes, es posible que desee una página de inicio de sesión más personalizada, para que se integre perfectamente con el diseño del sitio web en su conjunto. Ademá

(Consejos de tecnología y diseño)

Cómo quitar el fondo del icono de carpeta negra en Windows 10

Cómo quitar el fondo del icono de carpeta negra en Windows 10

Aparentemente hay un error en Windows 10 que agrega un fondo negro a las carpetas . No afecta los datos dentro de él de ninguna manera; simplemente hace que la carpeta se vea, bueno ... fea. Puede suceder debido a archivos dañados, un problema con el caché de miniaturas de la carpeta o con la imagen de Windows .Ta

(Consejos de tecnología y diseño)