Efeito modal com Jquery

Neste tutorial irei mostrar como fazer o efeito janela modal usando jquery. Portanto, se você ainda não possui a biblioteca do jQuery em sua máquina, baixe-o, pois iremos trabalhar com ela! Para baixar a ultima versão do jQuery acesse jquery.com. Após baixar a biblioteca de scripts jquery, renomeia para apenas jquery.js (geralmente vem seguido da versão, por isso a importância de renomear).

Por Programação Pular para comentários
Efeito modal com Jquery

Neste tutorial irei mostrar como fazer o efeito janela modal usando jquery. Portanto, se você ainda não possui a biblioteca do jQuery em sua máquina, baixe-o, pois iremos trabalhar com ela! Para baixar a ultima versão do jQuery acesse jquery.com. Após baixar a biblioteca de scripts jquery, renomeia para apenas jquery.js (geralmente vem seguido da versão, por isso a importância de renomear).

Agora adicione o jquery.js na pasta onde você salvará os arquivos que serão aplicados a este tutorial! Agora crie um arquivo em HTML e salve-o com um nome qualquer.
Para chamar o jquery.js para o documento html use a seguinte tag dentro da tag head:



Dentro do body da página inclua:

Demonstração do efeito modal

Primeira janela com efeito modal.

Segunda janela com efeito modal.



O atributo ID recebe o nome que foi definido no atributo name do link (da tag de ancora). Veja: Atributo name na ancora:
Primeira janela com efeito modal.


Atributo ID com o nome que foi definido na ancora. Veja:



Formatação do efeito com CSS


Dentro da tag head do html adicione a tag que chama o estilo.css. Veja a tag:

Em seguida crie um documento e salve-o como estilo.css. Depois copie o código abaixo e cole na página de estilos.
#mask{
position:absolute; /* important */
top:0px; /* start from top */
left:0px; /* start from left */
height:100%; /* cover the whole page */
width:100%;  /* cover the whole page */
display:none; /* don't show it '*/

/* styling bellow */
background-color: black;
}

.modal_window{
position:absolute; /* important so we can position it on center later */
display:none; /* don't show it */

/* styling bellow */
color:white;
}

/* style a specific modal window  */
#modal_window{
padding:50px;
border:1px solid gray;
background: #246493;
color:black;
}


Agora iremos adicionar o codigo que faz funcionar o efeito modal.
Dentro da tag head do html adicione:


Efeito concluído!

Como criar novos links com efeito modal?


Simples! Como disse no começo; na tag da ancora (de link) adicione o atributo name seguido do nome da ancora. Na div que contem o texto que será mostrado ao clicar no link defina um ID com o nome que foi atribuído à ancora. Igual ao nosso exemplo. Outro detalhe é que não precisa definir o id somente em div. Pode ser também em uma tag de paragrafo, por exemplo. Espero que tenham gostado da dica. O arquivo do tutorial encontra-se em anexo.

Compartilhe com seus amigos:
Mais sobre: jquery, javascript
Marciano Dias
Marciano Dias Desde de 2009 trabalho como WebDesigner Freelancer.
FACEBOOK // TWITTER: @marcianodias
Quer conversar com o(a) Marciano, comente:
Carregar comentários
Últimas notícias de Programação
  • Google usa Mulher-Maravilha para ajudar meninas a programar

    Google usa Mulher-Maravilha para ajudar meninas a programar

    Meninas ganham um incentivo extra na hora de aprender a programar, a Mulher-Maravilha.

  • Criando um cadastro de usuário em Java

    Criando um cadastro de usuário em Java

    O objetivo deste artigo é desenvolver uma aplicação em JSE (Java Standard Edition) de inserção de dados utilizando alguns padrões de projeto.

  • Quer aprender PHP? Saiba mais

    Quer aprender PHP? Saiba mais

    Chegou o tão aguardado curso online de PHP do Oficina da Net. Você não pode perder. PHP é uma das linguagens mais usadas no mundo. Os conteúdos que vou mostrar no curso, são exatamente o que você precisa saber para iniciar sua carreira como programador.

  • Formulário de contato em php

    Formulário de contato em php

    Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

  • Como fazer um GIF?

    Como fazer um GIF?

    Aprenda a criar um GIF animado de vídeos. Descubra como criar os GIFs, imagens animadas que você vê em na internet.

  • O que priorizar na hora de escolher o hosting para seu site?

    O que priorizar na hora de escolher o hosting para seu site?

    Com o crescimento das ofertas na web, saiba o que você deve levar em consideração na hora de escolher a melhor empresa de hosting para seu empreendimento

  • O que preciso fazer para criar um aplicativo?

    O que preciso fazer para criar um aplicativo?

    Temos visto que desenvolver aplicativos que visam o mercado mobile pode ser mais que uma alternativa rentável, pode colocá-lo no topo, deixá-lo rico. Mas nem tudo são flores, e o aspirante a desenvolvedor de app precisa seguir algumas regras.

  • WEBINAR 3.9

    WEBINAR 3.9

    Venha para o Maker e descubra como tornar o seu negócio mais competitivo.