, com um determinado conteúdo dentro e um botão "Fechar", gerado exclusivamente por meio de css.

Abrir janela 1 Abrir janela 2 Vídeo na janela 3 Foto na janela 4

No exemplo de código acima, para maior clareza, escrevi breves explicações nos contêineres de janelas modais. Resta para você por analogia, em contêiner div janela pop-up, coloque qualquer parte do seu conteúdo, seja texto simples, imagens ou vídeos de qualquer recurso de terceiros, YouTube, Vimeo, etc. Links para chamar janelas modais, você pode fazer texto ou pode projetá-los na forma de botões gradientes maravilhosos, como no exemplo.

Etapa 2. CSS

O próximo passo, este é o mais interessante, é importante preparar todos os estilos necessários para a nossa janela modal, organizar aparência e adicionar funcionalidade. Omiti os estilos básicos de página para não confundir e adicionei alguns comentários com comentários para maior clareza:

/ * Blecaute básico e estilos de camada modal * / .overlay (superior: 0; direita: 0; inferior: 0; esquerda: 0; índice z: 1; visibilidade: oculto; / * fundo de escurecimento * / cor de fundo: rgba (0, 0, 0, 0,7); opacidade: 0; posição: fixa; / * posicionamento fixo * / cursor: padrão; / * tipo de cursor * / -webkit-transição: opacidade .5s; -moz-transição: opacidade. 5s; -ms-transição: opacidade .5s; -o-transição: opacidade .5s; transição: opacidade .5s;) .overlay: alvo (visibilidade: visível; opacidade: 1;) .is-image (topo: 0; direita: 0; inferior: 0; esquerda: 0; exibição: bloco; margem: automático; largura: 100%; altura: automático; / * arredondando os cantos de imagens embutidas * / -webkit-border-radius: 4px; -moz - border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px;) / * elementos m-media incorporados, frames * / embed, iframe (superior: 0; direita: 0; inferior: 0; left: 0; display: block; margin: auto; min-width: 320px; max-width: 600px; width: 100%;) .popup h1 (/ * header 1 * / color: # 008000; text-align: left ; sombra do texto: 0 1p x 3px rgba (0,0,0, 0,3); fonte: 24px "Trebuchet MS", Helvetica, sem serifa; intensidade da fonte: Negrito; ) .popup h2 (/ * cabeçalho 2 * / cor: # 008000; alinhamento do texto: esquerda; sombra do texto: 0 1px 3px rgba (0,0,0, .3); fonte: 22px "Trebuchet MS", Helvetica , sans-serif;) / *** Estilos de janela modal do formulário *** / .popup (topo: 0; direita: 0; esquerda: 0; tamanho da fonte: 14px; índice z: 10; display: bloquear; visibilidade : oculto; margem: 0 automático; largura: 90%; largura mínima: 320px; largura máxima: 600px; / * posicionamento fixo, a janela é estável ao rolar * / posição: fixa; preenchimento: 15px; borda: 1px sólido # 383838; / * arredondamento cantos * / -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; cor de fundo: #FFFFFF; / * sombra da caixa externa * / -webkit-box-shadow: 0 0 6px rgba (0, 0, 0, 0,8); -moz-box-shadow: 0 0 6px rgba (0, 0, 0, 0,8); - ms-box -shadow: 0 0 6px rgba (0, 0, 0, 0.8); -o-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); box-shadow: 0px 0px 6px rgba ( 0, 0, 0, 0.8); / * transparência total da janela, aparecendo ao clicar * / opacidade: 0; / * efeito de transição (aparecendo) * / -webkit-transiti ligado: toda facilidade .5s; -moz-transição: toda facilidade .5s; -ms-transição: toda facilidade .5s; -o-transição: toda facilidade .5s; transição: toda facilidade .5s; ) / * permite que a janela apareça e escurece o fundo * / .overlay: target + .popup (parte superior: 20%; / * posição da janela na parte superior da página quando ela aparece * / visibilidade: visível; opacidade: 1; / * remover transparência * /) / * do botão Fechar * / .close (posição: absoluto; topo: -10px; direita: -10px; preenchimento: 0; largura: 20px; altura: 20px; borda: 2px sólido #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; cor de fundo: rgba (61, 61, 61, 0. oito); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; sombra da caixa: 0px 0px 10px # 000; alinhamento de texto: centro; decoração de texto: nenhum; intensidade da fonte: Negrito; altura da linha: 20px; / * definir valores e efeito de transição em pairar * / -webkit-transição: tudo facilidade .8s; -moz-transição: toda facilidade .8s; -ms-transição: toda facilidade .8s; -o-transição: toda facilidade .8s; transição: toda facilidade .8s; ) .close: before (color: rgba (255, 255, 255, 0.9); content: "X"; text-shadow: 0 -1px rgba (0, 0, 0, 0,9); font-size: 12px;) .close: hover (background-color: rgba (252, 20, 0, 0.8); / * gire o botão ao passar o mouse * / -webkit-transform: rotate (360deg); -moz-transform: rotate (360deg); - ms -transform: rotate (360deg); -o-transform: rotate (360deg); transform: rotate (360deg);) / * opcional ao adicionar anexos * / .popup p, .popup div (margin-bottom: 10px;)

Como você pode ver Caros amigos, tudo é muito simples e sem confusão desnecessária. Se você fizer tudo corretamente, você terá em seu arsenal, uma janela pop-up modal maravilhosa na qual você pode colocar qualquer conteúdo, seja conteúdo de texto, fotos, vários formulários de inscrição e comentários ou vídeo de qualquer fonte de terceiros. Experimente os parâmetros, modifique a janela como desejar e, se possível, compartilhe nos comentários suas melhores práticas, bem como os problemas que surgirem repentinamente.

Hoje em dia, para vários sites, todos os tipos de janelas modais pop-up - pop-ups - para registro, autorização, janelas de informação - todos os tipos de formas e tamanhos tornaram-se a norma. Há também um grande número de plug-ins além do jQuery para simples e criação conveniente tais pop-ups - o mesmo Shadowbox, por exemplo.

A aparência, tamanho e design de tais pop-ups são completamente variados - com sobreposição, sombras, animações - simplesmente incontáveis. O que os une, talvez, seja o fato de que costumam ser exibidos bem no centro da página - tanto horizontal quanto verticalmente. E a centralização é feita por meio de JS. Não vou entrar em detalhes sobre esses cálculos, vou descrevê-los apenas brevemente:

O código HTML pop-up geralmente tem a seguinte estrutura:

- Popup com conteúdo ->

E CSS ( aqui e abaixo, irei omitir deliberadamente a escrita de algumas propriedades que são necessárias apenas para alguns navegadores e suas versões, deixando apenas o mais básico):

Popup__overlay (
posição: fixa;
esquerda: 0;
topo: 0;
fundo: # 000;
opacidade: 0,5;
filtro: alfa (opacidade = 50);
Z-index: 999
}
.Aparecer (
posição: absoluta;
largura: 20%;
índice z: 1000;
borda: 1px sólido #ccc;
fundo: #fff
}

JS determina o navegador e a versão do navegador e, com base nisso, calcula o tamanho da área de trabalho e o tamanho do próprio pop-up (se não forem especificados) e, a seguir, cálculos simples da posição de seu canto superior esquerdo são realizados (propriedades css à esquerda e superior para .popup). Muitos plug-ins também reagem ao redimensionamento da página, recalculando tudo a cada vez para que o pop-up fique localizado exatamente no centro da área de trabalho.

Eu sou um perfeccionista por natureza (eu sei, às vezes é ruim), e muitas vezes me preocupo até com pequenos detalhes, tentando melhorar e adicionar o máximo possível de extensibilidade a esses detalhes, e eu não pude deixar de ser fisgado neste exato momento em o trabalho de todos esses plug-ins. Surgiu a ideia de que todo o trabalho de posicionamento do popup pode ser deslocado dos ombros do JS para os ombros do próprio navegador, ou seja, esse trabalho pode ser feito em CSS.

Isso é o que faremos.

A seguir, darei um exemplo de pop-up que funciona em todas as versões principais dos principais navegadores. Para fazer funcionar corretamente no IE<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

Então, temos uma página com um botão, ao ser clicado, ele deve aparecer janela modal com algumas informações, e todos os outros conteúdos devem ser sombreados pela sobreposição.

Vamos começar com o código HTML. Sua estrutura será ligeiramente diferente do código indicado acima, por que - mais sobre isso abaixo no artigo; as classes de elemento permanecerão as mesmas:

< div class ="popup__overlay">
< div class ="popup">

E algum CSS:

Popup__overlay (
posição: fixa;
esquerda: 0;
topo: 0;
largura: 100%;
altura: 100%;
Z-index: 999
}
.Aparecer (
}

Tamanhos fixos

A opção mais fácil. Você não precisa inventar nada novo:

Aparecer (
esquerda: 50%;
topo: 50%;
largura: 400px;
altura: 200px;
margem esquerda: -200px;
margin-top: -100px
}

Margens negativas com metade da largura e altura são triviais e chatas, nada de original nisso.

Os tamanhos dos pop-ups dependem do conteúdo

Primeiro, o alinhamento horizontal parece ser mais fácil. Se o pop-up tiver uma largura fixa, o seguinte será o suficiente:

Aparecer (
margem: auto
}

Isso não afetará o alinhamento vertical de forma alguma e, a propósito, se você só precisa do alinhamento horizontal, pode parar por aí especificando alguma outra margem superior do pop-up. Mas isso não é o suficiente para nós! Ir em frente.

Alinhamento vertical. É aqui que fica interessante. Claro, uma tabela ou emulação de uma tabela usando display: table & display: table-cell lidaria com tal tarefa sem problemas, mas fazer isso funcionar no antigo IE é mais caro. A mesa também desaparece - por razões óbvias.

Então, a margem já está faltando - não sabemos os tamanhos. Vamos lembrar o que são propriedades com efeitos semelhantes. Sim, alinhar o texto. Mas apenas para elementos embutidos. OK. Parece que o próprio Deus ordenou o uso de display: inline-block - um elemento de bloco ao qual se podem aplicar propriedades para elementos inline. Com o suporte desta propriedade em todos os navegadores, também, tudo, pode-se dizer, está em ordem. O código se torna algo assim:

Popup__overlay (
posição: fixa;
esquerda: 0;
topo: 0;
largura: 100%;
altura: 100%;
índice z: 999;
alinhamento de texto: centro
}
.Aparecer (
display: inline -block;
alinhamento vertical: meio
}

Permanece o alinhamento vertical - o alinhamento vertical é bom para nós. Em qualquer outra situação, também seria apropriado usar a altura da linha, mas como não temos uma altura de página fixa (altura da linha neste contexto), não podemos usá-la aqui. Um truque vem ao resgate com o alinhamento vertical de elementos de tamanhos desconhecidos. Lembro exatamente que encontrei esse método no Habré, mas, infelizmente, não consegui encontrar um link para esse tópico. Este método consiste no seguinte: um elemento inline-block de largura zero e altura de 100% do pai é adicionado, que "expande" a altura da linha para 100% da altura do pai, ou seja, para a altura de trabalho da página área. Vamos torná-lo mais elegante usando pseudoelementos em vez de marcação desnecessária:

Popup__overlay: depois (
display: inline -block;
largura: 0;
altura: 100%;
alinhamento vertical: meio;
contente: ""
}

Resta adicionar um escurecimento de sobreposição semitransparente - rgba cuidará disso. Tudo! Agora, a posição do pop-up é controlada apenas pelo navegador no nível CSS.

Nesta lição, não revelarei um segredo para designers de layout experientes e gurus de CSS, mas este artigo será útil para iniciantes. é aqui que você pode aprender como criar pop-ups no topo de todo o seu site.

Na maioria das vezes, essas janelas aparecem após a realização de certas ações no site, por exemplo, um usuário clica no link "Solicitar uma chamada de retorno" e um formulário de pedido aparece na frente dele.

É muito conveniente usar janelas PopUp em conjunto com ajax, mas este é um tópico para outra lição.

Mais e mais recursos da web estão começando a aparecer na web que usam pop-ups pop-up. Todo mundo sabe como exemplo. redes sociais... Todos os dados desnecessários das capturas de tela foram removidos.

Em contato com

Facebook

Twitter

Acho que há motivos suficientes para começar a estudar a questão: como fazer um pop-up pop-up em seu site.

Declaração do problema (TOR)

Você precisa criar uma janela pop-up com uma tela escurecida no topo de todo o site.

Solução

Método 1

html

css

* (font-family: Areal;) .b-container (width: 200px; height: 150px; background-color: #ccc; margin: 0px auto; padding: 10px; font-size: 30px; color: #fff;) .b-popup (largura: 100%; altura: 2000px; cor de fundo: rgba (0,0,0,0.5); estouro: oculto; posição: fixa; topo: 0px;) .b-popup .b-popup -content (margin: 40px auto 0px auto; width: 100px; height: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

Resultado:

Muitas vezes, sugere-se o uso de:

Posição: absoluta;
Sim, o resultado é o mesmo, mas devido ao fato de que definimos a altura do bloco de "sombreamento", aparecem barras de rolagem. É por isso que este método não é adequado.

Método 2

Esse método não difere drasticamente do Método 1, mas acho que é mais conveniente.

Html (inalterado)

Css

* (font-family: Areal;) .b-container (width: 200px; height: 150px; background-color: #ccc; margin: 0px auto; padding: 10px; font-size: 30px; color: #fff;) .b-popup (largura: 100%; altura mínima: 100%; cor de fundo: rgba (0,0,0,0.5); estouro: oculto; posição: fixa; topo: 0px;) .b-popup. b-popup-content (margin: 40px auto 0px auto; width: 100px; height: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

O resultado é semelhante

Graças à propriedade: altura mínima: 100%; nosso bloco "blackout" adquiriu uma largura de 100% e altura mínima em 100% da tela.

A única desvantagem este métodoé aquele Internet Explorer suporta esta propriedade apenas a partir da versão 8.0.

Adicionando magia ao Jquery

Agora vamos adicionar links para ocultar / mostrar nosso pop-up.

Para fazer isso, você precisa conectar a biblioteca JQuery e um pequeno script:

Além disso, o Html precisa ser atualizado:

Resultado

Agora, quando a página for carregada, o PopUp desaparecerá.

Você pode ver o resultado aqui.

Nesta lição, não revelarei um segredo para designers de layout experientes e gurus de CSS, mas este artigo será útil para iniciantes. é aqui que você pode aprender como criar pop-ups no topo de todo o seu site.

Na maioria das vezes, essas janelas aparecem após a realização de certas ações no site, por exemplo, um usuário clica no link "Solicitar uma chamada de retorno" e um formulário de pedido aparece na frente dele.

É muito conveniente usar janelas PopUp em conjunto com ajax, mas este é um tópico para outra lição.

Cada vez mais recursos da web estão começando a aparecer na web que usam pop-ups PopUp. Um exemplo são as redes sociais familiares. Todos os dados desnecessários das capturas de tela foram removidos.

Em contato com

Facebook

Twitter

Acho que há motivos suficientes para começar a estudar a questão: como fazer um pop-up pop-up em seu site.

Declaração do problema (TOR)

Você precisa criar uma janela pop-up com uma tela escurecida no topo de todo o site.

Solução

Método 1

html

css

* (font-family: Areal;) .b-container (width: 200px; height: 150px; background-color: #ccc; margin: 0px auto; padding: 10px; font-size: 30px; color: #fff;) .b-popup (largura: 100%; altura: 2000px; cor de fundo: rgba (0,0,0,0.5); estouro: oculto; posição: fixa; topo: 0px;) .b-popup .b-popup -content (margin: 40px auto 0px auto; width: 100px; height: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

Resultado:

Muitas vezes, sugere-se o uso de:

Posição: absoluta;
Sim, o resultado é o mesmo, mas devido ao fato de que definimos a altura do bloco de "sombreamento", aparecem barras de rolagem. É por isso que este método não é adequado.

Método 2

Esse método não difere drasticamente do Método 1, mas acho que é mais conveniente.

Html (inalterado)

Css

* (font-family: Areal;) .b-container (width: 200px; height: 150px; background-color: #ccc; margin: 0px auto; padding: 10px; font-size: 30px; color: #fff;) .b-popup (largura: 100%; altura mínima: 100%; cor de fundo: rgba (0,0,0,0.5); estouro: oculto; posição: fixa; topo: 0px;) .b-popup. b-popup-content (margin: 40px auto 0px auto; width: 100px; height: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

O resultado é semelhante

Graças à propriedade: altura mínima: 100%; nosso bloco "blackout" adquiriu uma largura de 100% e altura mínima em 100% da tela.

A única desvantagem desse método é que o Internet Explorer oferece suporte a essa propriedade apenas a partir da versão 8.0.

Adicionando magia ao Jquery

Agora vamos adicionar links para ocultar / mostrar nosso pop-up.

Para fazer isso, você precisa conectar a biblioteca JQuery e um pequeno script:

Além disso, o Html precisa ser atualizado:

Resultado

Agora, quando a página for carregada, o PopUp desaparecerá.

Você pode ver o resultado aqui.

Uma janela modal simples em termos de funções, que se executa totalmente em CSS puro, onde se pode colocar sob diversas funções a serem chamadas no site. Provavelmente esta é uma das muitas que conheci desde a seleção de janelas modais, em termos de suas configurações de próstata, mas também para instalação. Mas o principal é a sua funcionalidade, que não será inferior a outras. Além disso, por padrão, é feito sob uma sombra clara, onde à direita canto superior o botão é definido, em forma de cruz.

Que irá para a função de desactivação ou apenas para fazer desaparecer a moldura, onde até neste pequeno elemento existe um efeito de alteração da paleta de cores. Agora o webmaster pode colocá-lo no site e colocar uma descrição ou operadores nele, que podem exibir diferentes categorias, como estatísticas ou informantes.

Mas o fato é que, se você tem um estilo escuro do recurso, então no estilo você pode mudar rapidamente a escala, ou melhor, ajustá-lo ao design original. Aqui está um de métodos padrão como fazer css puro para a janela modal que será iniciada quando o botão for clicado sob o link com a âncora HTML. O botão em si vai mais para visibilidade, onde nos estilos, retira-se uma classe e fica o nome, que pode ser colocado na navegação ou no painel de controle, onde fica a principal funcionalidade ou navegação do site.

Isso é para verificar se tudo está funcionando bem:

Primeiros passos com a instalação:

Janela com botão

CSS

Butksaton-satokavate (
display: bloco embutido;
decoração de texto: nenhum;
margem direita: 7px;
raio da borda: 5px;
preenchimento: 7px 9px;
plano de fundo: # 199a36;
cor: # fbf7f7! important;
}

Anelumen (
display: flex;
posição: fixa;
esquerda: 0;
Os 100 melhores%;
largura: 100%;
altura: 100%;
alinhar-itens: centro;
justificar-conteúdo: centro;
opacidade: 0;
-webkit-transição: top 0s .7s, opacidade .7s 0s;
transição: top 0s .7s, opacidade .7s 0s;
}

Anelumen: alvo (
topo: 0;
opacidade: 1;
-webkit-transição: nenhum;
transição: nenhuma;
}

Figura Anelumen (
largura: 100%;
largura máxima: 530 px;
posição: relativa;
preenchimento: 1.8em;
opacidade: 0;
cor de fundo: branco;
-webkit-transição: opacidade .7s;
transição: opacidade .7s;
}

Figura Anelumen.lowingnuska (
plano de fundo: # f9f5f5;
raio da borda: 7px;
acolchoamento superior: 8px;
borda: 3px sólido #aaabad;
}

Anelumen.lowingnuska figura h2 (
margem superior: 0;
acolchoamento inferior: 3px;
borda inferior: 1px sólido # dcd7d7;
}

Anelumen: figura-alvo (
opacidade: 1;
}

Anelumen.lowingnuska .compatibg-ukastywise (
decoração de texto: nenhum;
posição: absoluta;
direita: 8px;
topo: 0px;
tamanho da fonte: 41px;
}

Anelumen .nedismiseg (
esquerda: 0;
topo: 0;
largura: 100%;
altura: 100%;
posição: fixa;
cor de fundo: rgba (10, 10, 10, 0,87);
contente: "";
cursor: padrão;
visibilidade: oculto;
-webkit-transição: todos .7s;
transição: todos .7s;
}

Anelumen: target .nedismiseg (
visibilidade: visível;
}

Você também precisa estar ciente de que o estilo CSS e a pseudo classe são aqueles que não são totalmente utilizados pelos recursos CSS com muitos aplicativos potenciais interessantes.

Começa quando Url page corresponde ao identificador de seu elemento, ou você pode colocá-lo de forma diferente, isto é, quando o usuário salta para um elemento específico na página.