[TUTORIAL] Ficha de personagem em lightbox

É comum acedermos ao perfil de algum membro para visualizar sua ficha de personagem, mas, nem sempre temos paciência de esperar a página carregar, então neste tutorial iremos aprender a colocar a ficha de personagem em tooltip, fazendo assim uma apresentação mais rápida e muito mais elegante. Ele funcionará da seguinte forma, ao clicarmos no nome do usuário de algum utilizador o efeito é ativado e a ficha de personagem é automaticamente mostrada.

--> Tutoriais, dicas e astúcias <--
Ficha de personagem em lightbox

1º - Adicionando o código CSS
Para que o efeito de elegância seja feito precisaremos, é claro, de códigos CSS para sustentar, então iremos aceder ao: Painel de controle -> Visualização -> Imagens e Cores -> Cores -> Aba 'Folha de estilo CSS'

Iremos adicionar este código e clicar em validar:

#profile-tip {
position: fixed;
top: 50%;
left: 30%;
background: white;
padding: 10px;
border: 1px solid black;
box-shadow: 0 0 50px black;
border-radius: 20px;
z-index: 9999 !important;
}
#profile-tip .panel {
background: transparent !important;
}
.column2 {
float: none !important;
}
#close-profile {
cursor: pointer;
padding: 5px;
position: absolute;
left: -15px;
top: -25px;
}
#prevBG{background:rgba(0, 0, 0, 0.31);bottom:0;left:0;position:fixed;right:0;top:0;z-index:99!important}

2º - Adicionando o código Js
Como o efeito é complexo usaremos também códigos Javascript, por isto iremos aceder ao Painel de controle -> Modulos -> HTML e Javascript -> Gestão dos códigos Javascript
Clicaremos no botão escrito "Criar um código java Script", e então colocaremos estas propriedades:

Titulo O que desejar, não irá interferir no código.

Investimento Deve estar marcada a opção "Em todas as páginas".

Código Javascript Código: jQuery(document).ready(function() { jQuery('a[href^="/u"]').click(function(e) {e.preventDefault();  var link = jQuery(this).attr('href'), t = jQuery(this).find('strong').html(); jQuery.get(link + 'rpg',function(data) { var i = jQuery('div.panel div.inner', data).html(); jQuery('body').prepend('<div id="prevBG"></div><div id="profile-tip">    <span id="close-profile"><img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/48/Alarm-Error-icon.png" /></span>        <strong><a href="' + link + '">' + t + '</a></strong>' + i + '</div>');  jQuery("#close-profile").click(function() { jQuery("#prevBG, #profile-tip").fadeOut(); });  }); }); });

3º - Resultado
Resultado atravez de uma imagem:

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Ficha de personagem em lightbox