[TUTORIAL] Caixa de aviso flutuante

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

  • 0

[TUTORIAL] Caixa de aviso flutuante

Mensagem por nikka em 17/08/14, 10:10 am



Caixa de aviso flutuante

Muitas das vezes queremos chamar a atenção dos usuários com anúncios e avisos de uma noticia que é urgentemente e precisa ser espalhada para todos. Então com base neste tutorial, podemos aplicar uma caixa de aviso flutuante sobre o fórum.


--> Tutoriais, dicas e astúcias <--
Caixa de aviso flutuante



- Conhecendo o código:
Código:
<div id="fdf_float" align="center">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#closedfstc").click(function(){
jQuery("#fdf_float").hide();
});
});
</script>
<style type="text/css">
#fdf_float a {
position: fixed;
bottom: 80px;
text-decoration: none;
right: 20px;
z-index: 3000;
}
a#caixflofstc {
position: fixed;
bottom: 10px;
line-height: 16px;
text-align: left;
right: 10px;
z-index: 1;
opacity: 0.8;
width: 360px;
height: 120px;
background: #cf3737;
color: #fff;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
padding: 10px;
text-decoration: none;
font-size: 11px;
font-family: Tahoma;
border: 1px solid #771b1b;
box-shadow: rgba(0,0,0,0.3) 0px 1px 4px, inset #f66c6c 0px 1px 0px;
border-radius: 3px;
}
a#caixflofstc:hover {
opacity: 1;
}
#caixflofstc strong {
font-family: "Trebuchet MS";
display: block;
font-size: 14px;
padding-bottom: 5px;
}
</style>
<a href="#" id="caixflofstc"><span id="closedfstc" style="float: right;">x</span>Conteúdo</a>
</div>
No final do código tem a frase conteúdo, modifique-a para o que desejar.


- Aplicando o código:
O código deve ser aplicado à um widget do fórum ou do portal, ou na página inicial:


  • Quero um exemplo com cookies, que quando clica, ele se fecha e não abre mais:
    Existe este modelo. Seria o mesmo de é usado na popup de navegação. Quando se clica em "Não exibir mais", é salvo um cookie que impede que ela seja aberta novamente até que o usuário reinicie os cookies do navegador. Se for, aconselhamos que, leia este tópico já respondido: http://ajuda.forumeiros.com/t96138-

  • Resultado:




© Fórum dos Fóruns & First


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Caixa de aviso flutuante
avatar

nikka
Membro profissional
Membro profissional

Feminino
Inscrito dia : 16/12/2008
Mensagens : 15621
Pontos Ativos : 19895

Ver perfil do usuário http://ajuda.forumeiros.com/ https://www.facebook.com/forumeirospt https://twitter.com/Forumeiros_PT

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum