Colocando e configurando menu Pop-Up
1- Primeiro, cole esse código antes de </head>. Na verdade pode ser em qualquer lugar entre <head> e </head>, mas vamos fazer desse jeito pra não dar problemas.
Procure nele, o seguinte: "http://www.sohtanaka.com/web-design/examples/modal-window/close_pop.png". Isso é o link do botão de close do seu menu pop up, mude pelo botão que você irá querer usar. Aqui tem alguns.
2- Cole o código abaixo onde você quer que apareça o menu, ou seja, onde a pessoa irá clicar e a janelinha pop-up irá aparecer.
<a href="#?w=500" rel="TITULO DO MENU" class="poplight"> <span class="NOME DO CSS DO SEU MENU, POR EXEMPLO 'NAV1'"> Nome que aparece no menu</span></a>
3- Agora, vamos fazer as janelinhas. Cole o código abaixo antes de </body>:
<div id="TITULO DO MENU" class="popup_block"> Conteúdo da janelinha. </div>
Obs: O titulo do menu deve ser o mesmo que você colocou no código anterior, é a mesma idéia de um falso-iframe.
4- Cole esse código no seu CSS, ou seja, em qualquer lugar entre <style> e </style>.
Para configurar a sua janelinha, veja as explicações dos códigos abaixo e use a tabela de cores:
4.1- FADE
Lá terá o seguinte: "background: #000;" isso é a cor do fundo atrás da janelinha, sabe aquele fundo preto, não é? Você pode por ele da cor que quiser, basta mudar a parte em negrito pelo codigo da cor de sua preferência.
4.2- POPUP_BLOCK
Encontre: "border: 15px solid #ddd;"
15px = tamanho da borda.
solid = configuração da borda, você pode usar dotted(pontilhada), double(dupla), dashed(seccionada, risquinhos)
#ddd = cor da borda
Encontre:
"background: #fff;": isso é a cor do fundo da sua janelinha, troque #fff pela cor de sua preferência.
Encontre:
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
Isso são as sombras da caixinha, troque pela mesma cor que você usou no 4.1 para combinar.
Tutorial por Luana (YouMakeMeCrazierBaby)
Não reblogue ou copie. Qualquer desrespeito as regras será denunciado sem aviso prévio.
