Exemplo de criação de uma caixa modal usando HTML5 e CSS3

Este artigo apresenta um exemplo de uso de HTML5 e CSS3 para criar uma caixa modal e compartilha-o com todos.

Talvez você não queira ler um monte de instruções extensas abaixo e queira visualizar diretamente o código-fonte ou um exemplo online. O link abaixo é uma caixa modal funcional que criei usando transição CSS3, opacidade, evento de ponteiro e outros atributos.

Você pode clicar nele para ir ao Github para visualizar o código fonte: ModalBox-Tutorial

Os componentes front-end são orientados por cenários de negócios e interação, e as caixas modais não são exceção. Um cenário comum é executar uma operação, como clicar em um botão e, em seguida, exibir uma caixa modal para fornecer feedback ao usuário ou orientá-lo. para realizar uma interação de interface inativa. A interação de uma caixa modal pode incluir 5 etapas:

1. Existe um botão ou link no qual o usuário clica para acionar a exibição da caixa modal;

2. Quando a caixa modal for exibida, haverá uma camada de máscara transparente que bloqueará toda a viewport atual;

3. O conteúdo da caixa modal aparecerá em uma determinada posição (geralmente no meio) da janela de visualização em uma cor não transparente (geralmente branca);

4. O conteúdo da caixa modal (geralmente no canto superior direito) terá um sinal de fechamento. Clicar nele ocultará a caixa modal;

5. O conteúdo da caixa modal deve ser especificado com base no cenário real do negócio, podendo ter qualquer estrutura.

estilo

1. .modalbox está inicialmente oculto;

1. .modalbox é uma camada de máscara transparente;

2. .modalbox-dialog é uma camada de conteúdo não transparente;

3. Após clicar no link mostrar caixa modal, .modalbox será exibido;

4. Após clicar em .modalbox-close-btn, .modalbox ficará oculto;

Exemplo de efeito

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.