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
Usar el elemento de diálogo
Utilizando el
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,
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
- Ver demostración
- Descargar Fuente
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á
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