Ficha do Avatar

• Descrição:

Olá, eu queria um botão que você clicava e aparecia a ficha
Exemplo:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Gostaria que também isso fosse editável

• Informações:

Código:


$(function() {
    $('body').append(
        '<style type="text/css">' +
        '#epf, form:not([action="/post"]) .button2, input[type="submit"] {' +
        'background-color: rgba(182, 182, 182, 0.7);' +
        'background-image: none !important;' +
        'border: 0 none;' +
        'color: #212121;' +
        'font-family: "Segoe UI Web Semibold","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial;' +
        'font-size: 100%;' +
        'font-weight: 400;' +
        'height: 2.142em;' +
        'min-width: 6em;' +
        'padding: 3px 12px 5px;' +
        '}' +
        'form:not([action="/post"]) .button2:hover, input[type="submit"]:hover {' +
        'background: none repeat scroll 0 0 rgba(205, 205, 205, 0.82);' +
        '}' +
        '#epf:active, .button2:active, input.button2:active, input[type="submit"]:active {' +
        'background-color: #212121;' +
        'color: #fff;' +
        '}' +
        '#epf {' +
        '-moz-border-bottom-colors: none;' +
        '-moz-border-left-colors: none;' +
        '-moz-border-right-colors: none;' +
        ' -moz-border-top-colors: none;' +
        'background: none repeat scroll 0 0 #242c2e !important;' +
        'border-color: #212121 !important;' +
        'border-image: none;' +
        'border-radius: 3px;' +
        'border-style: solid;' +
        'border-width: 1px 1px 0;' +
        'box-shadow: 0 2px 0 0 #5c5c5c inset, 0 2px 3px rgba(0, 0, 0, 0.2);' +
        'color: #fff;' +
        'cursor: pointer;' +
        'display: inline-block;' +
        'font-family: Helvetica,Arial,sans-serif;' +
        'font-size: 12px;' +
        'font-style: normal;' +
        'font-variant: normal;' +
        'font-weight: 300;' +
        'height: 30px;' +
        'line-height: 30px;' +
        'padding: 0 10px;' +
        'text-align: center;' +
        'text-shadow: 0 -1px 0 #191919;' +
        'width: 125px;' +
        '}' +
        '.user-info {' +
        'background: none repeat scroll 0 0 #fff;' +
        'border: 12px solid gray;' +
        'border-radius: 7px;' +
        'max-width: 300px;' +
        'padding: 7px;' +
        'position: absolute;' +
        'z-index: 99999;' +
        'margin-left: 130px;' +
        'margin-top: -200px;' +
        '}' +
        '.rank-personalizado2 {' +
        'float: left;' +
        'height: 100px;' +
        'margin-left: -153px;' +
        'margin-top: -100px;' +
        'position: absolute;' +
        'width: 100px;' +
        'z-index: 999999 !important;' +
        '}' +
        '.rank-personalizado {' +
        'float: left;' +
        'height: 89px;' +
        'margin-left: -233px;' +
        'margin-top: -33px;' +
        'position: absolute;' +
        'width: 90px;' +
        'z-index: 99999 !important;' +
        '}' +
        '.neve {' +
        'height: 32px;' +
        'margin-left: -110px;' +
        ' margin-top: -31px;' +
        'position: absolute;' +
        'width: 96px;' +
        'z-index: 9999 !important;' +
        '}' +
        '</style>'
    );
 
    var element = $('.postdetails.poster-profile');
 
    element.each(function() {
 
        var self = $(this);
 
        self.html(
            self.html().replace(/<span class="label/g, '<dd><div class="post_field" style="display:none"><span class="label')
        );
        self.append('<span id="epf" class="exibir-perfil">Exibir meu perfil</span>');
      
        self.find('.exibir-perfil').click(function() {
            self.find('.post_field').fadeToggle();
        });
    });
 
    $('.postdetails.poster-profile .post_field').addClass('user-info');
 
});