Criando uma pop-up estilo modalE ae galerinha blz? Hoje eu estou atualizando o tutorial e aproveitando para testar meu formulário de tutoriais, pelo jeito ficou bem legal, mas ainda não está pronto, em fim... Aproveitem o código e aguardem novidades...Descrição: Você pode abrir uma pop-up com um simples clique.

Versões de funcionamento: Todas as versões

E aeeeeee gente!
Fazia tempo que eu não postava um #tutorial eficiente pra vocês né?
Então, hoje eu resolvi criar esse tutorial pra atualizar um tutorial #antigo e feio que temos aqui, na verdade o tutorial antigo não é para #forumeiros, apesar do código #funcionar ele não é especificamente pra isso '-'
Então chega de bla bla bla e vamos o #código novo... #Tutorial antigo: http://staffergroupbr.stuning.net/t990-

Bem eu tentei fazer um tutorial por partes mas foi um completo EPIC FAIL então vamos fazer do modo bruto mlk!
Eu deixei o código "inteirão" aí pra vc, agora vc vai ter que decifrá-lo e edita-lo...
Calma calma que não é nada tão difícil, como o código é #complexo, eu irei responder perguntas nos comentários, sim. Não irei dizer "Abra um #tópico na área de #suporte seu filho da P!@---" Eu prometo!

Bem, pegue o código abaixo e coloque ele em um Widget ou em alguma página #HTML.

Código:

<a href="#janela1" rel="modal">Abrir Modal Window</a>
 <div class="window" id="janela1">
<a href="#" class="fechar">X Fechar</a>
<h2>INSIRA UM TÍTULO!</h4>
Insira seu conteúdo!
</div><div id="mascara"></div>
<style>
.window{
    display:none;
    width:300px;
    height:300px;
    position:fixed;
    left:0;
    top:0;
    background:#FFF;
    z-index:9900;
    padding:10px;
    border-radius:10px;
}
#mascara{
    display:none;
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
}
.fechar{
    display:block;
    text-align:right;
}
</style>
<script>
jQuery(document).ready(function(){
    /* Tutorial = http://staffergroupbr.stuning.net/t1989- */
    jQuery("a[rel=modal]").click( function(ev){
        ev.preventDefault();
 
   var id = jQuery(this).attr("href");
 
   var alturaTela = jQuery(document).height();
        var larguraTela = jQuery(window).width();
    
       jQuery('#mascara').CSS({'width':larguraTela,'height':alturaTela});
        jQuery('#mascara').fadeIn(1000);
        jQuery('#mascara').fadeTo("slow",0.8);
 
   var left = (jQuery(window).width() /2) - ( jQuery(id).width() / 2 );
        var top = (jQuery(window).height() / 2) - ( jQuery(id).height() / 2 );
    
       jQuery(id).CSS({'top':top,'left':left});
        jQuery(id).show();  
    });
 
jQuery("#mascara").click( function(){
        jQuery(this).hide();
        jQuery(".window").hide();
    });
 
jQuery('.fechar').click(function(ev){
        ev.preventDefault();
        jQuery("#mascara").hide();
        jQuery(".window").hide();
    });
});
</script>

Agora salve e vá visualizar...

Mas só?
kk Sim, agora depende de você editar e dar seu próprio estilo, qualquer ajuda só pedir aí em baixo.

Demonstração: http://metalltestes.virtuaboard.com/t15-

• Resultado:
  

Lembrando que esse artigo foi “baseado” nos códigos do imortal Maujor...
Valeu gente, até a próxima.

---

© Staffer Group BR™
PRECISA DE SUPORTE?

Criador: D'Leandro™ Site: www.staffergroupbr.stuning.net

Obrigado estou postando para ver o código!

Muito bom!

gracias