Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Junior Varoni

efeito parecido com lightbox

Por , em Javascript

Recommended Posts

Junior Varoni    9

Junior Varoni
Postado

Bom galera, meu problema é o seguinte, gostaria de fazer um botão em meu site com um efeito parecido com lightbox, só q ao invez de aparecer uma imagem, apareca um formulario de perguntas em uma div...

 

Resolvido

 

Galera, consegui. Usei o plugin Shadowbox segue o link para quem se interesar >> http://www.shadowbox-js.com

 

 

 

espero que minha duvida seja util a alguem :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mateus Vinicius    1

Mateus Vinicius
Postado

Use o código abaixo:

 

 

 

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
.light-bg {
    background: rgba(187, 187, 187, 0.43);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    position: fixed;
}
.light-borda {
    position: fixed;
    left: 30%;
    top: 30%;
    border: 10px solid gray;
    border-radius: 10px;
}
.light-corpo {
    background: white;
    width: 300px;
    height: 100px;
    padding: 20px;
}
.fechar {
    font-size: 10px;
    float: left;
    margin-top: -15px;
    margin-left: -10px;
}
.light-bg,.light-borda{display:none;}
</style>
<script>
function lightbox(){jQuery('.light-bg,.light-borda').fadeIn('fast');}
function fechar(){jQuery('.light-bg,.light-borda').fadeOut('fast');}
</script>
</head>
<body>
<input type="button" onclick="lightbox();" value="Abrir lightbox" />


<div class="light-bg"></div>
<div class="light-borda">
<div class="light-corpo">
<a href="#" class="fechar" onclick="fechar();">Fechar</a>
HTML DO FORMULÁRIO
</div>
</div>
</body>
<html>

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito