Abrir página em lightbox

Detalhes da questão

Endereço do fórum: http://maniagamer.forum-pro.net/
Versão do fórum: PunBB

Descrição

Olá, muito tempo sem postar dúvidas aqui, gostaria de pedir ajuda dos desenvolvedores para isso, estou estudando lightbox agora, e fiz um sistemazinho bacana, de uma loja, para meu fórum como podem ver aqui: http://maniagamer.forum-pro.net/h10-

Ao clicar em ABRIR LOJA, a mesma abre em LIGHTBOX, mas eu gostaria de abrir a mesma, somente clicando no botão no menu "seja sócio", estou quebrando a cabeça aqui com isso, os senhores sabem fazer isso de alguma maneira?

Código que criei:

Código:

$(document).ready(function(){
 $('.lightbox').click(function(){
 $('.background, .boxlig').animate({'opacity':'.60'}, 500, 'linear');
 $('.boxlig').animate({'opacity':'1.00'}, 500, 'linear');
 $('.background, .boxlig').css('display', 'block');
 });
});

$(function(){
$('.close').click(function(){
 $('.background, .boxlig').animate({'opacity':'0'}, 500, 'linear', function(){
 $('.background, .boxlig').css('display', 'none');
 });
 });
});

$(function(){
$('.background').click(function(){
 $('.background, .boxlig').animate({'opacity':'0'}, 500, 'linear', function(){
 $('.background, .boxlig').css('display', 'none');
 });
 });
});

ID do botão seja sócio é nav_app_store.

Muito obrigado!

Boa tarde!

Eu sei que estou me metendo, sorry. Espero estar ajudando, apesar se não ser um dos desenvolvedores e o senhor ter deixado claro que almejava a ajuda deles.

---

Spoiler:

Lamento por me meter e caso não seja isso, explique melhor, caso deseje que eu tente te ajudar.

Abraço!
MateusAnjosV.

Opa, claro que não, pode me responder sim coloquei os desenvolvedores pôs são os mais experientes no assunto, mas qualquer um pode responder
Bom o código não deu certo, quero que abra a página /h10- em lightbox ao clicar no botão do menu "seja sócio" e não consigo fazer isso ^^
Obrigado!

Entendo a sua teoria @Shaman, mas pense só em um detalhe: eles foram membros antes, rs.

---

Teoricamente, o código funcionou e eu notei que o retirou, porém, só funcionou dentro do /h10 e pelo que notei, deseja em todo fórum.
Experimente esse js, em todas as páginas:

Código:

$(document).ready(function(){
$('#primary_nav').after('<div id="mateusanjos" class="background"></div><div class="boxlig"><div class="close">x</div></div> <style>.shopWrapper { width: 837px; text-align: center; margin: 0px auto; overflow: hidden; height: auto; border: 1px solid rgb(207, 207, 207); background: whiteSmoke; } .inventWrapper { width: 850px; height: auto; overflow: hidden; } .type_header { -webkit-box-shadow: none !important; margin: 0px; padding: 10px 0px; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: arial, helvetica, sans-serif; color: white; background-color: #262626; border: 1px solid #6E6A65; background-repeat: repeat no-repeat; width: 100%; } .itemWrapper { text-align: center; margin: 0 auto; float: left; } .item { width: 201px; min-height: 195px; border: 1px solid #CECECE; overflow: hidden; height: 330px; padding: 33px; background: #fff; text-align: center; margin: 5px; } .type_header { -webkit-box-shadow: none !important; margin: 0px; padding: 10px 0px; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: arial, helvetica, sans-serif; color: white; background-color: #262626; border: 1px solid #6E6A65; background-repeat: repeat no-repeat; width: 100%; } #checkout { float: left; height: 425px; text-align: center; background: white; font-size: 17pt; padding: 10px; margin: 10px; width: 95%; } .image img { padding-top: 13px; height: 200px; width: 187px; } .descrip { float: left; margin-left: -10px; padding-left: 15px; padding-right: 15px; padding-top: 5px; padding-bottom: 5px; background: #E9E9E9; border: 1px solid #CECECE; width: 92.3%; text-align: left; margin-top: 30px; margin-bottom: 15px; } .points { background: url(http://s6.tinypic.com/286sfuu_th.jpg) no-repeat; padding-bottom: 5px; padding-left: 18px; color: #242424; font-weight: bold; font-size: 11px; float: left; text-align: center; } .sale { color: green; font-style: italic; font-size: 11px; float: right; text-align: center; } .description { color: #242424; font-size: 11px; word-wrap: break-word; text-align: left !important; float: left; text-indent: 11px; } .background{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: .0; background-color: #000000; -moz-opacity: .0; filter:alpha(opacity=0); z-index:100; display: none; } .boxlig { position: absolute; top: 10%; left: 30%; width: 835px; height: 1390px; background-color: #FFFFFF; z-index: 101; padding: 14px; margin-bottom: 5px; box-shadow: 2px 2px 2px #333333; -moz-box-shadow: 2px 2px 2px #333333; -webkit-box-shadow: 2px 2px 2px #333333; display: none; } .close{ float: right; margin-right: 10px; cursor: pointer; font-size: 35px; margin-bottom: 20px; margin-left: 50px; } #Lightbox { vertical-align:middle; position:fixed; }</style>'); 
$('.close').click(function(){
      $('.background, .boxlig').animate({'opacity':'0'}, 500, 'linear', function(){
         $('.background, .boxlig').css('display', 'none');
      });
   }); 
$('.background').click(function(){
      $('.background, .boxlig').animate({'opacity':'0'}, 500, 'linear', function(){
         $('.background, .boxlig').css('display', 'none');
      });
   });  $.get('/h10-', function(bod){var t =  $('.shopWrapper', bod).html(); $('.boxlig').append('<div class="shopWrapper"> '+t+' </div>'); });

$('#nav_app_store').click(function(e){e.preventDefault(); $('.background, .boxlig').animate({'opacity':'.60'}, 500, 'linear');
  $('.boxlig').animate({'opacity':'1.00'}, 500, 'linear');
  $('.background, .boxlig').css('display', 'block');
  });

});

Aqui funcionou, espero que funcione ai.

Opa, funcionou legal e.e, o CSS deu uma bagunçada mas isso eu arrumo aqui!! Também vou estudar seu código, pôs estou voltando com JQuery agora, estava estudando c++, mas ai precisei mexer no forum ^^, mais uma vez muito obrigado!