Ícones flutuantes

Detalhes da questão

Endereço do fórum: http://pokemonillium.forumeiros.com/
Versão do fórum: phpBB3

Descrição

Olá,

Gostaria de aplicar o seguinte código a meu fórum: http://cupcakegraphics.forumeiros.com/

Acessando o fórum disponibilizado, note os widgets localizados a esquerda. Os nomeados "i. ,ii, iii, iv.". Clicando sobre o quadrado, irá aparecer um quadro ao centro da página, gostaria de algo semelhante. Entretanto, não utilizo widgets em meu fórum então há algumas considerações a serem seguidas.

1) Os ícones deveriam aparecer ao lado do wrap do forum.
2) Os ícones devem aparecer em todas as páginas para que haja fácil acesso aos mesmos.

Por não utilizar widgets, acredito que as unicas formas de fazê-lo seja desenvolvendo o codigo em uma pagina html e atribuindo a descrição do fórum, ou via java script. Entretanto não sei como fazê-lo em nenhuma das situações :<

Olá,

Esse tipo de código é um pouco complexo de ser feito, o que vai além do nosso escopo de trabalho por aqui.
Tendo isso em vista, não é certo de que seu tópico será ou não atendido por membros da equipe, por ser algo mais complexo.

Assim, fica à critério do senhor manter ou não os UP's neste tópico, bem como mantê-lo aberto ou não.

Obrigado pela sua compreensão. o/

Tudo bem Luiz, estarei aguardando a possível disponibilização de um usuário.

@EDIT, acredito que um efeito semelhante ao do lista de membros localizado aqui no FDF tbm seja valido, entretanto deveria ser adaptado para que apareçam as divs que desejo ao invés de uma lista propriamente falando.

Desde já, agradeço

up

outro método que imaginei para aplicar o efeito a todas as paginas, seria via edição de template, assim como o utilizado ao lado do logo do meu forum.

up

UP

Acredito que so o efeito desejado já me baste, não sendo necessário que haja um icone flutuante em todas as paginas

upzinho

*-* up

up

Olá zHugh -qq
Então, eu possuo um código que tem este efeito. Só que ele é um pouco diferente, você precisará personalizá-lo para melhor agrado. Ele não foi feito por mim, ele é disponibilizado gratuitamente em um tumblr de códigos, estou apenas repassando-os para você.

Se você deseja que apareça em todas as páginas, recomendo colocar no template overall_header, na seção de templates e opção geral, no final do código mesmo, já que ele está em modo position: absolute, ele não irá atrapalhar os códigos do fórum.

Código:

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet" type="text/css" />
<center>
                     
        <div class="tablon-anuncios">
                                                                                             
                <div id="example-popup" class="modal-content">
                                                                                                           
                        <table cellspacing="0">
                                                                                                       
                                <tbody>
                                                                                                               
                                        <tr>
                                                                                                                       
                                                <td>
                                                                                                                               
                                                        <div class="ambientacion">
                                                                                                    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. <br /><br />Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.                                 
                                                        </div>
                                                                                                                               
                                                </td>
                                                                                                                       
                                                <td>
                                                                                            <img src="http://goo.gl/oFJdKT" style="width: 300px;" />                                     
                                                        <div class="bot-negro">
                                                                                                                                         
                                                        </div>
                                                                                                                               
                                                </td>
                                                                                                                       
                                        </tr>
                                                                                                               
                                </tbody>
                                                                                                       
                        </table>
                                                                                                   
                </div>
                                                                                             
                <div id="admin-tab" class="modal-content">
                                                                               
                        <div style="margin-right: 4px;" class="admin">
                                                            <img src="http://i.imgur.com/FipfoTz.jpg" />                           
                                <div class="info-admin">
                                                                    Thor                         
                                </div>
                                                                                     
                                <div class="info-admin">
                                                                    Admin                           
                                </div><a class="info-admin" href="url">Contacto</a>                           
                        </div>
                                                                           
                        <div style="margin-right: 4px;" class="admin">
                                                            <img src="http://i.imgur.com/k1GF747.jpg" />                           
                                <div class="info-admin">
                                                                    Natasha                         
                                </div>
                                                                                     
                                <div class="info-admin">
                                                                    Admin                           
                                </div><a class="info-admin" href="url">Contacto</a>                           
                        </div>
                                                                           
                        <div class="admin">
                                                            <img src="http://i.imgur.com/akymeww.jpg" />                           
                                <div class="info-admin">
                                                                    Bruce                         
                                </div>
                                                                                     
                                <div class="info-admin">
                                                                    Admin                           
                                </div><a class="info-admin" href="url">Contacto</a>                           
                        </div>
                                                                                                 
                </div>
                                                                               
                <div id="links-tab" class="modal-content">
                                                                                             
                        <div style="margin-right: 4px;" class="link-title">
                                                      Principales                     
                        </div>
                                                                   
                        <div class="link-title">
                                                      Secundarios                     
                        </div>
                                                               
                        <div class="links-pples">
                                                    <a href="url">Enlace 1</a><a href="url">Enlace 2</a><a href="url">Enlace 3</a><a href="url">Enlace 4</a><a href="url">Enlace 5</a>                   
                        </div>
                                                             
                        <div class="links-sdarios">
                                                    <a href="url">Enlace 1</a><a href="url">Enlace 2</a><a href="url">Enlace 3</a><a href="url">Enlace 4</a><a href="url">Enlace 5</a><a href="url">Enlace 6</a><a href="url">Enlace 7</a><a href="url">Enlace 8</a><a href="url">Enlace 9</a><a href="url">Enlace 10</a>                 
                                <div class="bot2">
                                                                           
                                </div>
                                                                     
                        </div>
                                                                                               
                </div>
                                                                               
                <div id="news-tab" class="modal-content">
                                                         
                        <div class="column-tab" style="margin-right: 4px;">
                                                                                               
                                <div class="novedad">
                                                      Última<br />novedad             
                                </div>
                                                           
                                <div class="nov-cont">
                                                      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.             
                                </div>
                                                           
                                <div style="margin-top: 64px;" class="link-title">
                                                          Noticias anteriores                 
                                </div>
                                               
                                <div class="noticias">
                                                00/00 Título de la noticia.<br /><br />00/00 Título de la noticia.<br /><br />00/00 Título de la noticia.       
                                </div>
                                                               
                        </div>
                                                         
                        <div class="column-tab">
                                                               
                                <div class="link-title">
                                                          Búsquedas                 
                                </div>
                                           
                                <marquee scrollamount="2" class="busquedas" direction="up" onmouseout="this.start()" onmouseover="this.stop()">
                                              <a href="url">Título de la búsqueda 1</a><br /><br /><a href="url">Título de la búsqueda 2</a><br /><br /><a href="url">Título de la búsqueda 3</a><br /><br /><a href="url">Título de la búsqueda 4</a><br /><br /><a href="url">Título de la búsqueda 5</a>     
                                </marquee>
                                                               
                        </div>
                                                                                     
                </div>
                             
        </div>
</center>
<div class="botones">
                                                                                             
        <div class="title">
                                                          Menu                                         
        </div><a href="#" class="modal-link" data-modal-target="example-popup">Index</a><a href="#" class="modal-link" data-modal-target="admin-tab">Staff</a><a href="#" class="modal-link" data-modal-target="links-tab">Links</a><a style="border-bottom: 3px solid #000;" href="#" class="modal-link" data-modal-target="news-tab">News</a><span style="font-size: 10px; font-weight: 700;  text-transform: uppercase; font-family: calibri; position: relative; top: 5px; text-align: center;"><a href="http://thecaptainknowsbest.tumblr.com/" style="color: #000;">© HARDROCK</a></span>
</div>

Código:

.botones {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 73px;
}
 
.busquedas {
  background: #e1e0e0;
  text-align: center;
  height: 146px;
  overflow: hidden;
  font-weight: bold;
}
 
.busquedas a {color: #000;}
 
.tablon-anuncios {font-family: source sans pro;}
 
.noticias {
  font-size: 11px;
  line-height: 100%;
  color: #000;
  font-weight: bold;
  text-align: justify;
}
 
.novedad {
  display: inline-block;
  line-height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 70px;
  background: #000;
  margin-right: 1px;
  text-align: center;
  padding-bottom: 20px;
  color: #f2f2f2;
  padding-top: 20px;
}
 
.nov-cont {
  display: inline-block;
  position: absolute;
  right: 0px;
  top: 0px;
  height: 50px;
  background: #e1e0e0;
  line-height: 100%;
  text-align: justify;
  color: #000;
  width: 186px;
  padding: 5px;
}
 
.column-tab {
  width: 270px;
  overflow: hidden;
  position: relative;
  height: 181px;
  display: inline-block;
}
 
.links-sdarios .bot2 {
  margin-top: 5px;
  width: 100%;
  height: 40px;
  background: #000;
}
 
.links-sdarios {
  height: 150px;
  overflow: hidden;
  width: 270px;
  display: inline-block;
}
 
.links-sdarios a {
  display: inline-block;
  background: #e1e0e0;
  line-height: 100%;
  color: #000;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 134px;
  margin-top: 1px;
  margin-right: 1px;
  text-align: center;
  font-size: 11px;
  transition: 1s;
}
 
.links-sdarios a:hover {letter-spacing: 2px; transition: 1s;}
 
.links-pples {
  width: 270px;
  height: 150px;
  overflow: hidden;
  margin-right: 5px;
  display: inline-block;
}
 
.links-pples a {
  display: block;
  background: #e1e0e0;
  line-height: 100%;
  color: #000;
  padding-top: 9px;
  padding-bottom: 9px;
  margin-top: 1px;
  text-align: center;
  font-size: 11px;
  transition: 1s;
}
 
.links-pples a:hover {transition: 1s; letter-spacing: 2px;}
 
.link-title {
  display: inline-block;
  margin-bottom: 5px;
  width: 270px;
  font-size: 11px;
  text-transform: uppercase;
  text-align: center;
  line-height: 100%;
  font-family: Source Sans Pro;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #f9f9f9;
  background: #000;
}
 
.admin .info-admin {
  display: block;
  width: 87px;
  text-align: center;
  margin-left: 90px;
  font-size: 11px;
  background: #000;
  border-bottom: 1px solid #F9F9F9;
  line-height: 100%;
  padding-top: 3px;
  padding-bottom: 3px;
  color: #F9F9F9;
}
 
.admin img {float: left; width: 90px; height: 181px;border-right: 1px solid #F9F9F9;}
 
.admin {
  height: 181px;
  width: 178px;
  overflow: hidden;
  display: inline-block;
  background: #000;
}
 
.ambientacion {
  height: 161px;
  padding: 10px;
  color: #000;
  width: 220px;
  margin-right: 5px;
  background: #e1e0e0;
  line-height: 100%;
  font-size: 11px;
  text-align: justify;
}
 
.bot-negro {
  width: 300px;
  height: 50px;
  margin-top: 5px;
  background: #000;
}
 
.botones a {color: #eee;}
 
.botones .title {
  display: block;
  text-transform: uppercase;
  font-family: Source Sans Pro;
  font-size: 13px;
  background: #000;
  width: 70px;
  text-align: center;
  color: #eee;
  font-weight: 600;
  margin-bottom: 1px;
  padding-top: 10px;
  padding-bottom: 5px;
  line-height: 100%;
  height: 20px;
  border-right: 3px solid #000;
}
 
.modal-link {
  display: block;
  text-transform: uppercase;
  font-family: Source Sans Pro;
  font-size: 13px;
  background: #21B7B8;
  width: 70px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 1px;
  padding-top: 10px;
  padding-bottom: 5px;
  line-height: 100%;
  height: 20px;
  border-right: 3px solid #000;
  transition: 0.5s;
}
 
.modal-link:hover {transition: 0.5s; width: 90px;}
 
.modal-content {
        display: none;
}
 
#fade-background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000000;
        z-index: 2;
}
#modal-window {
  position: fixed;
  top: 64px;
  width: 550px;
  padding: 20px;
  left: 50%;
  height: 181px;
  overflow: hidden;
  border: 10px solid #000;
  margin: 0 0 0 -295px;
  background-color: #F9F9F9;
  z-index: 3;
}
/*Pop up*/

Código:

// jQuery Modal Popups by Black
// http://code.jfbs.net/?showtopic=57
$(document).ready(function() {
        var fadeBackground = $(document.createElement("div")).hide().attr("id", "fade-background"),
        modalWindow = $(document.createElement("div")).hide().attr("id", "modal-window");
        $(document.body).append(fadeBackground, modalWindow);
        $(document).on("click", ".modal-link", function(e) {
                $("#fade-background").css({ "opacity": "0.3" }).fadeIn("fast");
                var newContents = $("#" + $(this).data("modal-target")).html();
                $("#modal-window").html(newContents);
                $("#modal-window").fadeIn("fast");
                e.preventDefault();
        });
        $(document).on("click", "#fade-background", function() {
                $("#fade-background").fadeOut("fast");
                $("#modal-window").fadeOut("fast");
        });
        $(document).keypress(function(e) {
                if(e.keyCode == 27) {
                        $("#fade-background").fadeOut("fast");
                        $("#modal-window").fadeOut("fast");
                }
        });
});

O codigo funcionou tranquilamente em uma pagina HTML mas ao aplica-lo no template sugerido o mesmo sequer apareceu no fórum

up

up

up

Saudações querido!

Ao salvar o template após a implementação/edição do mesmo, é necessário publicá-lo para que o efeito seja adicionado ao fórum. O senhor publicou o template?

Att!

Sim, eu o publiquei

Faça o seguinte!

Esse código coloque no template:

Código:

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet" type="text/css" />
<center>
                     
        <div class="tablon-anuncios">
                                                                                             
                <div id="example-popup" class="modal-content">
                                                                                                           
                        <table cellspacing="0">
                                                                                                       
                                <tbody>
                                                                                                               
                                        <tr>
                                                                                                                       
                                                <td>
                                                                                                                               
                                                        <div class="ambientacion">
                                                                                                    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. <br /><br />Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.                                 
                                                        </div>
                                                                                                                               
                                                </td>
                                                                                                                       
                                                <td>
                                                                                            <img src="http://goo.gl/oFJdKT" style="width: 300px;" />                                     
                                                        <div class="bot-negro">
                                                                                                                                         
                                                        </div>
                                                                                                                               
                                                </td>
                                                                                                                       
                                        </tr>
                                                                                                               
                                </tbody>
                                                                                                       
                        </table>
                                                                                                   
                </div>
                                                                                             
                <div id="admin-tab" class="modal-content">
                                                                               
                        <div style="margin-right: 4px;" class="admin">
                                                            <img src="http://i.imgur.com/FipfoTz.jpg" />                           
                                <div class="info-admin">
                                                                    Thor                         
                                </div>
                                                                                     
                                <div class="info-admin">
                                                                    Admin                           
                                </div><a class="info-admin" href="url">Contacto</a>                           
                        </div>
                                                                           
                        <div style="margin-right: 4px;" class="admin">
                                                            <img src="http://i.imgur.com/k1GF747.jpg" />                           
                                <div class="info-admin">
                                                                    Natasha                         
                                </div>
                                                                                     
                                <div class="info-admin">
                                                                    Admin                           
                                </div><a class="info-admin" href="url">Contacto</a>                           
                        </div>
                                                                           
                        <div class="admin">
                                                            <img src="http://i.imgur.com/akymeww.jpg" />                           
                                <div class="info-admin">
                                                                    Bruce                         
                                </div>
                                                                                     
                                <div class="info-admin">
                                                                    Admin                           
                                </div><a class="info-admin" href="url">Contacto</a>                           
                        </div>
                                                                                                 
                </div>
                                                                               
                <div id="links-tab" class="modal-content">
                                                                                             
                        <div style="margin-right: 4px;" class="link-title">
                                                      Principales                     
                        </div>
                                                                   
                        <div class="link-title">
                                                      Secundarios                     
                        </div>
                                                               
                        <div class="links-pples">
                                                    <a href="url">Enlace 1</a><a href="url">Enlace 2</a><a href="url">Enlace 3</a><a href="url">Enlace 4</a><a href="url">Enlace 5</a>                   
                        </div>
                                                             
                        <div class="links-sdarios">
                                                    <a href="url">Enlace 1</a><a href="url">Enlace 2</a><a href="url">Enlace 3</a><a href="url">Enlace 4</a><a href="url">Enlace 5</a><a href="url">Enlace 6</a><a href="url">Enlace 7</a><a href="url">Enlace 8</a><a href="url">Enlace 9</a><a href="url">Enlace 10</a>                 
                                <div class="bot2">
                                                                           
                                </div>
                                                                   
                        </div>
                                                                                               
                </div>
                                                                               
                <div id="news-tab" class="modal-content">
                                                         
                        <div class="column-tab" style="margin-right: 4px;">
                                                                                               
                                <div class="novedad">
                                                      Última<br />novedad             
                                </div>
                                                           
                                <div class="nov-cont">
                                                      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.             
                                </div>
                                                           
                                <div style="margin-top: 64px;" class="link-title">
                                                          Noticias anteriores                 
                                </div>
                                               
                                <div class="noticias">
                                                00/00 Título de la noticia.<br /><br />00/00 Título de la noticia.<br /><br />00/00 Título de la noticia.       
                                </div>
                                                               
                        </div>
                                                         
                        <div class="column-tab">
                                                               
                                <div class="link-title">
                                                          Búsquedas                 
                                </div>
                                           
                                <marquee scrollamount="2" class="busquedas" direction="up" onmouseout="this.start()" onmouseover="this.stop()">
                                              <a href="url">Título de la búsqueda 1</a><br /><br /><a href="url">Título de la búsqueda 2</a><br /><br /><a href="url">Título de la búsqueda 3</a><br /><br /><a href="url">Título de la búsqueda 4</a><br /><br /><a href="url">Título de la búsqueda 5</a>     
                                </marquee>
                                                               
                        </div>
                                                                                     
                </div>
                             
        </div>
</center>
<div class="botones">
                                                                                             
        <div class="title">
                                                          Menu                                         
        </div><a href="#" class="modal-link" data-modal-target="example-popup">Index</a><a href="#" class="modal-link" data-modal-target="admin-tab">Staff</a><a href="#" class="modal-link" data-modal-target="links-tab">Links</a><a style="border-bottom: 3px solid #000;" href="#" class="modal-link" data-modal-target="news-tab">News</a><span style="font-size: 10px; font-weight: 700;  text-transform: uppercase; font-family: calibri; position: relative; top: 5px; text-align: center;"><a href="http://thecaptainknowsbest.tumblr.com/" style="color: #000;"> HARDROCK</a></span>
</div>

Esse na CSS:

Código:

.botones {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 73px;
}
 
.busquedas {
  background: #e1e0e0;
  text-align: center;
  height: 146px;
  overflow: hidden;
  font-weight: bold;
}
 
.busquedas a {color: #000;}
 
.tablon-anuncios {font-family: source sans pro;}
 
.noticias {
  font-size: 11px;
  line-height: 100%;
  color: #000;
  font-weight: bold;
  text-align: justify;
}
 
.novedad {
  display: inline-block;
  line-height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 70px;
  background: #000;
  margin-right: 1px;
  text-align: center;
  padding-bottom: 20px;
  color: #f2f2f2;
  padding-top: 20px;
}
 
.nov-cont {
  display: inline-block;
  position: absolute;
  right: 0px;
  top: 0px;
  height: 50px;
  background: #e1e0e0;
  line-height: 100%;
  text-align: justify;
  color: #000;
  width: 186px;
  padding: 5px;
}
 
.column-tab {
  width: 270px;
  overflow: hidden;
  position: relative;
  height: 181px;
  display: inline-block;
}
 
.links-sdarios .bot2 {
  margin-top: 5px;
  width: 100%;
  height: 40px;
  background: #000;
}
 
.links-sdarios {
  height: 150px;
  overflow: hidden;
  width: 270px;
  display: inline-block;
}
 
.links-sdarios a {
  display: inline-block;
  background: #e1e0e0;
  line-height: 100%;
  color: #000;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 134px;
  margin-top: 1px;
  margin-right: 1px;
  text-align: center;
  font-size: 11px;
  transition: 1s;
}
 
.links-sdarios a:hover {letter-spacing: 2px; transition: 1s;}
 
.links-pples {
  width: 270px;
  height: 150px;
  overflow: hidden;
  margin-right: 5px;
  display: inline-block;
}
 
.links-pples a {
  display: block;
  background: #e1e0e0;
  line-height: 100%;
  color: #000;
  padding-top: 9px;
  padding-bottom: 9px;
  margin-top: 1px;
  text-align: center;
  font-size: 11px;
  transition: 1s;
}
 
.links-pples a:hover {transition: 1s; letter-spacing: 2px;}
 
.link-title {
  display: inline-block;
  margin-bottom: 5px;
  width: 270px;
  font-size: 11px;
  text-transform: uppercase;
  text-align: center;
  line-height: 100%;
  font-family: Source Sans Pro;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #f9f9f9;
  background: #000;
}
 
.admin .info-admin {
  display: block;
  width: 87px;
  text-align: center;
  margin-left: 90px;
  font-size: 11px;
  background: #000;
  border-bottom: 1px solid #F9F9F9;
  line-height: 100%;
  padding-top: 3px;
  padding-bottom: 3px;
  color: #F9F9F9;
}
 
.admin img {float: left; width: 90px; height: 181px;border-right: 1px solid #F9F9F9;}
 
.admin {
  height: 181px;
  width: 178px;
  overflow: hidden;
  display: inline-block;
  background: #000;
}
 
.ambientacion {
  height: 161px;
  padding: 10px;
  color: #000;
  width: 220px;
  margin-right: 5px;
  background: #e1e0e0;
  line-height: 100%;
  font-size: 11px;
  text-align: justify;
}
 
.bot-negro {
  width: 300px;
  height: 50px;
  margin-top: 5px;
  background: #000;
}
 
.botones a {color: #eee;}
 
.botones .title {
  display: block;
  text-transform: uppercase;
  font-family: Source Sans Pro;
  font-size: 13px;
  background: #000;
  width: 70px;
  text-align: center;
  color: #eee;
  font-weight: 600;
  margin-bottom: 1px;
  padding-top: 10px;
  padding-bottom: 5px;
  line-height: 100%;
  height: 20px;
  border-right: 3px solid #000;
}
 
.modal-link {
  display: block;
  text-transform: uppercase;
  font-family: Source Sans Pro;
  font-size: 13px;
  background: #21B7B8;
  width: 70px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 1px;
  padding-top: 10px;
  padding-bottom: 5px;
  line-height: 100%;
  height: 20px;
  border-right: 3px solid #000;
  transition: 0.5s;
}
 
.modal-link:hover {transition: 0.5s; width: 90px;}
 
.modal-content {
        display: none;
}
 
#fade-background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000000;
        z-index: 2;
}
#modal-window {
  position: fixed;
  top: 64px;
  width: 550px;
  padding: 20px;
  left: 50%;
  height: 181px;
  overflow: hidden;
  border: 10px solid #000;
  margin: 0 0 0 -295px;
  background-color: #F9F9F9;
  z-index: 3;
}
/*Pop up*/

E por último, coloque este jQuery criando um novo na seção CPainel > Módulos >> HTML & JAVASCRIPT >>> Gestão dos códigos JavaScript:

Código:

// jQuery Modal Popups by Black
// http://code.jfbs.net/?showtopic=57
$(document).ready(function() {
        var fadeBackground = $(document.createElement("div")).hide().attr("id", "fade-background"),
        modalWindow = $(document.createElement("div")).hide().attr("id", "modal-window");
        $(document.body).append(fadeBackground, modalWindow);
        $(document).on("click", ".modal-link", function(e) {
                $("#fade-background").css({ "opacity": "0.3" }).fadeIn("fast");
                var newContents = $("#" + $(this).data("modal-target")).html();
                $("#modal-window").html(newContents);
                $("#modal-window").fadeIn("fast");
                e.preventDefault();
        });
        $(document).on("click", "#fade-background", function() {
                $("#fade-background").fadeOut("fast");
                $("#modal-window").fadeOut("fast");
        });
        $(document).keypress(function(e) {
                if(e.keyCode == 27) {
                        $("#fade-background").fadeOut("fast");
                        $("#modal-window").fadeOut("fast");
                }
        });
});

Lembre-se de habilitar o gerenciamento de códigos JS na própria seção que eu lhe indiquei e o investimento deve ser "em todas as páginas".

Att!

Funcionou *-