tranformar uma janela popup?

[Apenas Eu 13]

Ola!

Gostaria de aprender a criar uma janela pop up. Com css da pra fazer né???

 

A ideia é fazer algo semelhante deste site aki http://jasadesenvolvimento.com.br/?DL=J3#SG ao clicar ali em baixo em orçamento.

 

Valeu!

[crf_h0m3r 5]

Que tal você mostrar o que já fez?

O que você procurou e achou a respeito?

[Apulko 3]

Ali no ex citado não está apenas em css.

 

Busque por lightbox em jquery ou css3 pra ficar mais estilizado.

[Edson Carli 0]

Amigo, sugiro você usar JQuery com o plugin SimpleModal :

 

http://www.ericmmartin.com/projects/simplemodal/

 

Ou então usar JQuery UI caso já use o plugin no seu sistema - apesar de achar feio o modal do JQuery UI.

 

Obviamente você consegue fazer na unha com CSS e Javascript/Jquery caso a intenção seja aprendizado, pois se não for não vale a pena.

[Apenas Eu 13]

ola!

 

Gostei dessas dicas, desses slideshow. Eu achei uma bem simpleszinho,e gostei desses modelos prontos. Vou tentar adaptar com que eu ja fiz. Não seria pra aprender, seria para usar mesmo....hehehehe

 

Eu ja fiz isso http://www.dcsdesenvolvimento.com.br/box-cv01.php mas obviamente falta estilizar. A principio eu imaginava conforme o site citado no meu primeiro post, http://jasadesenvolv...om.br/?DL=J3#SG ao clicar ali em baixo em orçamento.

 

 

Valeu ;)

[Daniel Kuroski 0]

Cara, para caso você queira aqui estão 3 janelas modais que eu uso ou usei

 

Essa é uma bem simples e ensina desde o zero

http://www.maujor.com/blog/2009/04/16/janela-modal-com-jquery/

 

Essa é bem legal

http://tutorialzine.com/2012/07/framewarp-jquery-plugin/

 

E essa é a que eu uso, e eu acho que é a mais completa que eu já consegui encontrar, ela é uma "extensão" do modal do JqueryUI

http://fstoke.me/jquery/window/

 

 

E se tiver problemas quanto a centralização do modal, você pode usar esse plugin que ele eh muuito útil.

http://projetos.lucaspeperaio.com.br/plugin-jquery-centralize/

 

 

Espero que seja útil xD... já me quebrei bastante por causa disso.

[Apenas Eu 13]

Esse aqui é bem legal tambem: http://tutorialzine....-jquery-plugin/

 

Eu vou tentar usar um bem dahora do link que o edson sugeriu. Por enquanto me parece meio dificil mexer, mas se eu não conseguir eu vou usar esse que você indicou. Se eu nao conseguir tambem...vo fazer o simples que eu ja tinha encontrado.....

 

Por enquanto obrigado..mas vamos deixar em aberto aki pra duvidas posteriores sobre o assunto (y)

[Edson Carli 0]

Esse aqui é bem legal tambem: http://tutorialzine....-jquery-plugin/

 

Eu vou tentar usar um bem dahora do link que o edson sugeriu. Por enquanto me parece meio dificil mexer, mas se eu não conseguir eu vou usar esse que você indicou. Se eu nao conseguir tambem...vo fazer o simples que eu ja tinha encontrado.....

 

Por enquanto obrigado..mas vamos deixar em aberto aki pra duvidas posteriores sobre o assunto (y)

 

Se você vai usar o simple modal, já te dou uma mão pois se não me engano ele não vem com o CSS, você altera ele do jeito que você achar melhor. Abaixo o css que montei pra ele ficar bonito ;) :

 

.content
{
overflow: visible;
background-color: #ffffff;
}

       /*Cor de fundo transparente, altere a cor se desejar combinar com seu site*/
.simplemodal-overlay
{
background-color: #658CCF;
}
.simplemodal-data
{
background-color: #ffffff;
padding: 20px;
-o-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

#simplemodal-container a.modalCloseImg {
width:25px;
height:29px;
display:inline;
z-index:3200;
position:absolute;
top:-10px;
right:-10px;
cursor:pointer;
} 


.simplemodal-data
{
-webkit-box-shadow: -5px 5px 5px 5px rgba(3, 3, 3, .5);
-moz-box-shadow: -5px 5px 5px 5px rgba(3, 3, 3, .5);
box-shadow: -5px 5px 5px 5px rgba(3, 3, 3, .5); 

font-size:12px;
font-family: Arial,Helvetica,sans-serif;
} 

/*imagem do X de fechar, caso não ache uma substituta, me avise que tenho vários links com icones free com o símbolo de fechar*/
#simplemodal-container a.modalCloseImg {

	background:url(/imagens/x.png) no-repeat; /* adjust url as required */
}

 

Com essa configuração ele fica assim:

 

Espero ter ajudado ;)

[Apenas Eu 13]

que bonito em...valeuu!

 

Vo tentar mexer um pouco nesse momento. Vamos ver se consigo :)

 

Esse cód seria de css3 né?

 

e como faz para tipo fazer um link para abrir outra pagina dentro do popup?

 

Eu quero fazer um orçamento de duas etapas sabe...para num ficar tudo na mesma tela....

 

Resumindo, quero fazer um link para abrir dentro da janela popup. Será que é dificil?

 

Surgiu outra duvida... Cada botao de orçamento na minha página seria direcionado para aquele produto especifico. Com meu conhecimento limitado, unica maneira de fazer isso, era eu fazer um "box" para cada item. Portanto, como faz para que cada botao abra uma janela especifica?

[Edson Carli 0]

que bonito em...valeuu!

 

Vo tentar mexer um pouco nesse momento. Vamos ver se consigo :)

 

Esse cód seria de css3 né?

 

Sim mas é css2 compatível. Não fica tão bonito com o css2 mas fica suficientemente agradável e funcional :thumbsup:

 

e como faz para tipo fazer um link para abrir outra pagina dentro do popup?

 

Eu quero fazer um orçamento de duas etapas sabe...para num ficar tudo na mesma tela....

 

Resumindo, quero fazer um link para abrir dentro da janela popup. Será que é dificil?

 

Surgiu outra duvida... Cada botao de orçamento na minha página seria direcionado para aquele produto especifico. Com meu conhecimento limitado, unica maneira de fazer isso, era eu fazer um "box" para cada item. Portanto, como faz para que cada botao abra uma janela especifica?

Esse popup é pra divs, basta após apertar o botão você exibir um div com iframe.

Algo como :

<div id="win">
  <div id="conteudo1">
  bla bla bla
  <input id="cmd" type="buttom"/>
  </div>
  <div id="outraPagina">
        <iframe..../>
  </div>
</div>
....
$(document).ready(
function()
{
   $("#win").modal();
   $("#cmd").bind("click",abrirTela2FecharTela1);
});

function abrirTela2FecharTela1()
{
   $("#conteudo1").hide();
   $("#outraPagina").show();
}
...
#outraPagina,#win
{
  display:none;
}

Não sei se entendi a questão mas se a idéia é ir abrindo outra tela dentro do modal, você pode fazer isso com iframes, ocultando e mostrando os divs que desejar. Desculpe se tiver algum erro acima pois fiz de cabeça, a idéia era mostrar o caminho das pedras ^_^

[Apenas Eu 13]

oo rapaiz num tem nada que desculpar nao...eu só tenho o que agradecer!

 

Bem...eu tentei fazer isso... conteudo1, conteudo2...mas não deu certo. Não sei se fiz no lugar certo né.

 

Vou mostrar o link onde eu usaria a técnica:

http://www.dcsdesenvolvimento.com.br/s-cartoes.php

 

No caso, nesta mesma pagina eu colocaria um botao para abrir uma tela especifica, com um formulario para cada produto. (teria esse botao que esqueci de tirar ali em baixo rs)

 

Seria como um atalho. Como eu não consegui, eu deixei ele apenas nas paginas do produto, conforme o exemplo:

 

http://www.dcsdesenvolvimento.com.br/m-cartoes-uv.php .