Los cuadros de diálogo (también conocidos como cuadros modales y capas flotantes) son una parte importante de la interacción del usuario en proyectos web. Los más comunes que usamos son alert() y confirm() en js. Sin embargo, este cuadro de diálogo no es hermoso y no puede. Ser personalizado, por lo que durante el proceso de desarrollo, generalmente construimos ruedas de acuerdo con nuestras propias necesidades o utilizamos ruedas de terceros.
La composición del cuadro de diálogo.Formas comunes de cuadros emergentes:
Posición: esquina superior izquierda de la pantalla, esquina superior derecha, esquina inferior izquierda, esquina inferior derecha, centro vertical, etc.
Tamaño: ancho fijo y alto fijo, ancho fijo y alto fijo, ancho variable y alto fijo, etc.
El formulario de diálogo que se está desarrollando es un caso de combinación aleatoria de posición y tamaño.
Sin embargo, hay una situación (centrado vertical con ancho y alto variables) que no es fácil de implementar (puede usar display:table o Translate o flex de CSS3 para lograrlo). Para obtener más detalles, consulte el diseño de centrado horizontal y vertical. .
El cuadro de diálogo anterior contiene un contenedor para el contenido y también hay una capa de máscara debajo del cuadro de diálogo. La capa de máscara es una capa de separación entre el cuadro de diálogo y el cuerpo de la página que se forma después de que el usuario activa el cuadro emergente. Su existencia puede brindar a los usuarios un efecto de diferencia visual más obvio y, al mismo tiempo, evitar otras operaciones principales innecesarias de la página después de que los usuarios activan el cuadro de diálogo, produciendo así una mejor experiencia de usuario.
hay un problemaAunque hay muchas ruedas de diálogo entre las que podemos elegir, nos enfrentamos a varios problemas.
Entonces, ¿existe una forma sencilla de crear un cuadro de diálogo? Por supuesto, podemos utilizar el elemento de diálogo HTML5.
HTML5 (diálogo)
<dialog open> <h2>Hola mundo.</h2></dialog>
Es muy simple. Podemos usar el código anterior para crear un cuadro de diálogo que aparezca con el contenido 'Hola mundo'.
También es fácil controlar la visualización/ocultación del cuadro de diálogo. Agregue el atributo de apertura para mostrarlo y elimínelo para ocultarlo. Por supuesto, también podemos controlar la visualización y ocultación del cuadro de diálogo a través de la interfaz DOM (show(), close())
Para la capa de máscara debajo del cuadro de diálogo, podemos usar el pseudoelemento ::backgrop y, para activarlo, necesitamos usar la API DOM showModal(). La característica de ::backgrop es que su posición está debajo del cuadro de diálogo. , en cualquier índice z anterior.
El uso de showModal() no solo puede mostrar la capa de máscara, sino también el contenedor de diálogo, por lo que cuando use ::backdrop, puede usar showModal() en lugar de la API show() si presiona la tecla ESC en el teclado; La capa emergente se cerrará. Por supuesto, se puede utilizar la API DOM close().
Podemos configurar la capa ::backdrop para que sea una capa semitransparente, el código es el siguiente:
cuadro de diálogo::fondo { color de fondo: rgba(0, 0, 0, 0.75);}Además de nuestras capas emergentes comunes con información solicitada, también hay una capa emergente con un formulario que se usa más comúnmente.
Capa emergente con formulario¿Podemos usar el elemento de diálogo HTML5 combinado con el elemento de formulario para crear estas capas emergentes?
Respuesta: Sí
¿Cómo podemos combinar estrechamente el elemento de formulario y el elemento de diálogo?
Respuesta: Solo necesitamos agregar el atributo método = diálogo al elemento de diálogo, para que el valor del atributo del elemento de botón se pueda pasar al elemento de diálogo.
<dialog> <form método=dialog> <p>Confirmar o Cancelar</p> <botón tipo=enviar valor=yes>Confirmar</botón> <botón tipo=enviar valor=no>Cancelar</botón> </formulario ></dialog><script> var dialog = document.querySelector('dialog') dialog.showModal() dialog.addEventListener('close', function(event) { console.log(dialog.returnValue) })</script>manifestación
Compatibilidad del navegadorAunque se trata de un HTML5 relativamente fácil de usar, todavía existen problemas de compatibilidad. Chrome y Opera lo admiten mejor. Es una característica experimental en Firefox, pero no es compatible con IE, Edge y Safari. por ios y también es compatible con Android no es lo suficientemente bueno y solo es compatible con Android 6 y posteriores. Para más detalles, consulte caniuse.
Entonces, ¿pueden las versiones anteriores de los navegadores admitir el diálogo HTML5? En primer lugar, lo que pensamos es si existe un polyfill que admita el diálogo, al igual que babel-polyfill que admita las nuevas características de es6. De hecho, existe un proyecto de código abierto a11y-dialog que proporciona diferentes versiones de vue y. reaccionar respectivamente.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.