Como fazer janelas modais

Escrito por vail joy | Traduzido por alexandre amorim
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer janelas modais
Janelas modais agem como uma moldura dinâmica para seu conteúdo (Stockbyte/Stockbyte/Getty Images)

Janelas modais são uma forma nova e discreta de exibir conteúdo pop-up em suas páginas web. Crie-as para oferecer formulários de cadastro, mostrar imagens em tamanho real, exibir mensagens de confirmação ou qualquer conteúdo que desejar. Elas são excelentes em sua flexibilidade de design, o conteúdo flutua acima da página-mãe usando um efeito de sobreposição, e o elemento dentro dela pode ser personalizado de várias formas. Existem vários scripts pré-prontos e plugins que podem ser implementados em seu HTML ou sistema de gerenciamento de conteúdo, mas pode-se criar uma janela modal de forma rápida e fácil usando apenas o CSS3 e o HTML5.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra um editor de texto ou de HTL e crie um novo documento em branco. Coloque a tag "doctype" do HTML 5:

    <!DOCTYPE html>

    Adicione as tags de estrutura básica do documento para criar um modelo em branco.

    <head>

    </head> <body>

    </body> </html>

  2. 2

    Crie o conteúdo do HTML. Para esse exemplo, pode-se fazer um recipiente simples com algum texto e algumas miniaturas de imagem para criar uma mini-galeria:

    <div id="container"> <header>Gallery Example</header> <section id="gallery"> <article class="description"> Click on each thumbnail to view a larger version. </article> <div id="gallery_thumbs"> <img src="images/thumb1.jpg" alt="1"/> <img src="images/thumb1.jpg" alt="2"/> <img src="images/thumb1.jpg" alt="3"/> </div> </section> </div>

  3. 3

    Crie sua janela ao adicionar outra DIV abaixo da DIV recipiente. Dê a ela um ID único que será usado como link para a modal, e uma classe que será usada para personalizá-la. Para esse exemplo, pode-se criar três modais, uma para cada imagem em tamanho real. Insira a imagem na DIV e ligue cada uma ao designar uma URL à âncora "#close". Isso permitirá ao espectador simplesmente clicar na imagem para fechá-la.

    <div id="img1" class="modal"> <a href="#close"><img src="images/1.jpg" alt="1"/></a> </div> <div id="img2" class="modal"> <a href="#close"><img src="images/2.jpg" alt="2"/></a> </div> <div id="img3" class="modal"> <a href="#close"><img src="images/3.jpg" alt="3"/></a> </div>

  4. 4

    Crie links fora das miniaturas da imagem ao encapsulá-las em uma tag "a href". Para abrir uma imagem em tamanho real em sua modal, é preciso ajustar a URL de cada link como a âncora ou ID definidos em sua DIV modal correspondente:

    <div id="gallery_thumbs"> <a href="#img1"><img src="images/thumb1.jpg" alt="1"/></a> <a href="#img2"><img src="images/thumb1.jpg" alt="2"/></a> <a href="#img3"><img src="images/thumb1.jpg" alt="3"/></a> </div>

  5. 5

    Coloque seu cursor na tag "<head>" e insira a seguinte tag de "estilo" :

    <style>

    </style>

    Os estilos em CSS para seus elementos e recipientes modais serão colocados aqui. Pode-se opcionalmente colocá-los em um arquivo "style.css" em separado e colocar um link em seu arquivo HTML. Para criar o efeito modal, sua classe precisa pelo menos possuir uma posição de valor "absolute", um valor alto para a o atributo "z-index", e um atributo "display:none".

    .modal { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; z-index: 999; background: rgba(0,0,0,0.5); -webkit-animation-duration: 1s; -webkit-animation-name: fade; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; }

    Para personalizar o link "fechar", adicione o estilo para a sua tag "a":

    .modal a { display: block; vertical-align: right; text-align: center;

    }

    Para criar uma moldura personalizada ou criar um efeito de "polaroid", adicione um estilo para a tag "img":

    .modal img { padding: 5px 5px 45px 5px; background: #ffffff; -webkit-box-shadow: 0px 0px 15px #444; -moz-box-shadow: 0px 0px 15px #444; -webkit-animation-duration: 0.50s; -webkit-animation-name: grow; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-timing-function: ease-in; }

  6. 6

    Adicione mais um estilo à sua classe "modal" usando o pseudo seletor ":target". Ele permitirá que a URL alvo seja ajustada como um link para mostrar o conteúdo de um elemento oculto, que nesse caso, é o seu efeito modal.

    .modal:target {

    display: table; height:100% }

    Continue inserindo estilos adicionais para suas miniaturas ou conteúdos a gosto. Salve os arquivos e visualize-os em seu navegador para ver os resultados.

Dicas & Advertências

  • Para exibir conteúdo ao invés de uma imagem, mude o estilo ".modal img" pra ".modal content" e dê ao seu DIV uma classe de "conteúdo":
  • This is an example of a modal dialog.
  • OK

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível