Box Modal

x
Box Modal
Renan Azevedo

Box Modal
X

O que é?
Como funciona?
Como desenvolver ?

Box Modal
X
O que é?

Box Modal – O que é?
X
As antigas popups
Safari
Internet Explorer
Firefox

X
As antigas popups - Desvantagens

Configurações iguais, resultados diferentes
Simplesmente não aparecem ou pedem permissão.
Forçar/pedir ao usuário que habilite popups

X
Box modal

X
Box modal - Vantagens

Exibição de informações, formulários, avisos, etc. de uma maneira muito mais simples e elegante
Carregamento do novo conteúdo na mesma janela
Sem refresh, reload, ou seja sem atualizar a página
Personalização

Box Modal
X
Como funciona?

Box Modal – Como funciona?
X
(X)HTMl

Criamos o conteúdo a ser carregado e o elemento que chamará o box modal
Criamos os elementos para montar o box modal

X
CSS

Posicionamento dos elementos do box modal na página
Personalização dos objetos do box modal e do conteúdo a ser mostrado

X
JavaScript

Eventos para exibir e ocultar box modal
Demais configurações que possam ser necessárias

Box Modal
X
Como desenvolver?

Box Modal – Como desenvolver?
X
Passo 1: (X)HTML + CSS

Criar DIV com HTML para servir de base o box modal
Centralizar esta DIV na página com CSS

X

Criar DIV para ser o fundo do box modal
Personalize este elemento de forma que não seja possível interagir com outro conteúdo do site a não ser o do box modal

X

Criar DIVs para título e botão de fechar da box modal
Personalize a DIV para o título de forma que ela fique no topo do box modal e personalize a div para o botão de fechar de modo que fique no topo superior direito

X
Passo 4: CSS

Oculte os elementos criados até o momento

X
Passo 5: (X)HTML + JS

Cria um link em sua página
Agora ao clicar sobre o link, o box modal deve ser mostrado
Adicione o evento contrário ao botão de fechar do box modal

x
Parabéns
Se você seguiu todos os passos, você conseguiu criar um box modal.
Sinta-se à-vontade agora para modificar, personalizar e melhorar o seu box modal.
Renan Azevedo