Código bajo de Jiema | Explicación detallada del componente de caja modal modal

Suplemento de conocimientos:

Un componente modal es un tipo especial de componente que se muestra en la interfaz de usuario. Están diseñados para guiar al usuario a través de una tarea o interacción específica mientras el resto de la aplicación está bloqueada o suspendida.

Los componentes modales comunes incluyen:

1. Ventana emergente: una ventana emergente es un componente modal común que muestra una nueva ventana o panel en la interfaz de usuario para guiar al usuario a través de una tarea específica, como completar un formulario o confirmar una operación.

2. Diálogo: el diálogo es un componente modal que se utiliza para mostrar un cuadro de diálogo en la interfaz de usuario para guiar a los usuarios a tomar decisiones o recopilar información. Los cuadros de diálogo comunes incluyen cuadros de alerta, cuadros de confirmación y cuadros de entrada.

3. Cuadro modal (Modal): el cuadro modal es un componente modal común, que muestra un cuadro flotante en la interfaz de usuario para guiar a los usuarios a realizar tareas u operaciones específicas.

Cuadro modal: abre una ventana emergente en la página actual, que admite la personalización del contenido de la ventana emergente, como un cuadro de confirmación simple, formulario complejo, Iframe, etc.

1. Cómo utilizar

1. Inicie sesión con el código de acceso directo;

Si no tiene una cuenta, haga clic para obtener una cuenta gratuita: http://dev.gemcoder.com/front/development/index.html#/login

2. Crear aplicaciones y páginas;

3. Busque el componente modal, arrástrelo y suéltelo en la página (normalmente en la capa más externa);

4. Realizar configuración general: título, fondo, arrastrar, botón de cerrar, etc.;

5. Configure el estilo: establezca el ancho, zIndex y si desea mostrar la capa de máscara en el centro vertical, y también puede configurar el estilo en la configuración avanzada, puede escribir el estilo CSS en el estilo personalizado;

2. Introducción de la propiedad 

3. Escenarios de aplicación

Cuando el componente del cuadro modal necesita que el usuario maneje los asuntos y no quiere saltar a la página para interrumpir el flujo de trabajo, puede usarlo para  Modal abrir una capa flotante en el medio de la página actual para realizar las operaciones correspondientes. También se puede utilizar cuando se requiere un cuadro de confirmación conciso para preguntar al usuario.

1. Admite visualización predeterminada de inicialización

Efecto:

Configuración:

 

2. Admite configuraciones de contenido inferior oculto

Efecto:

 Configuración:

 3. Admite arrastrar

Efecto:

 Configuración:

 

4. Admite hacer clic en la máscara para cerrar

Efecto:

Configuración :

 

5. Admite la destrucción de los elementos secundarios en el modal al cerrar

Efecto - antes del cierre:

Efecto - después del cierre:

 Configuración:

 

Supongo que te gusta

Origin blog.csdn.net/Gemcoder/article/details/132055238
Recomendado
Clasificación