Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Fala pessoal, beleza ? Seguinte, to tentando implementar modal no link de um botão, mas testei e quando clico nada acontece, vou colocar os pontos que interessam, aqui o código:
**Parte que fica no <head>**
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
.window{
display:none;
width:300px;
height:300px;
position:absolute;
left:0;
top:0;
background:#FFF;
z-index:9900;
padding:10px;
border-radius:10px;
}
#mascara{
display:none;
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
}.fechar{display:block; text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#modal").click( function(ev){
ev.preventDefault();
var id = $(this).attr("href");
var alturaTela = $(document).height();
var larguraTela = $(window).width();
//colocando o fundo preto
$('#mascara').css({'width':larguraTela,'height':alturaTela});
$('#mascara').fadeIn(1000);
$('#mascara').fadeTo("slow",0.8);
var left = ($(window).width() /2) - ( $(id).width() / 2 );
var top = ($(window).height() / 2) - ( $(id).height() / 2 );
$(id).css({'top':top,'left':left});
$(id).show();
});
$("#mascara").click( function(){
$(this).hide();
$(".window").hide();
});
$('.fechar').click(function(ev){
ev.preventDefault();
$("#mascara").hide();
$(".window").hide();
});
});
</script>
**Parte que fica no <body>**
<div class="window" id="orcamento">
<a href="#" class="fechar">[X] Fechar</a>
<?php require_once 'orcamento.php'; ?>
</div>
<div id="mascara"></div>
<a href="#orcamento" id="modal"><img src="images/botao.png" alt="Solicite Agora" style="position: absolute; top: -50px; left: 295px;" /></a>Alguém por gentileza pode me ajudar ?
confira se aparece algum erro no console:
http://wbruno.com.br/2011/03/31/como-debugar-javascript-firefox-erros-comuns/
Hora: 10/12/2012 14:44:50
Erro: ReferenceError: $J is not defined
Arquivo-fonte: http://localhost/papelcarmim/Listas-Escola-Municipal-Paranagua-Pre2.php#janela1
Linha: 93
a linha 93 é essa:
$(document).ready(function(){
continuaa não funcionando mesmo copiando o codigo desse link :/
não tem nada de $J no código que você postou.
procure e corrija.
>
não tem nada de $J no código que você postou.
procure e corrija.
ops, na verdade tinha, tirei do meu codigo original e aqui só alterei em um lugar e esqueci de alterar no outro, mas ta certo lah, soh que n funfa :(
Ok, e qual erro aparece agora ?
se você não nos der o código certo, e nem o diagnostico correto, não vamos conseguir te ajudar nunca.
Você precisa nos ajudar a te ajudar.
>
Ok, e qual erro aparece agora ?
se você não nos der o código certo, e nem o diagnostico correto, não vamos conseguir te ajudar nunca.
Você precisa nos ajudar a te ajudar.
Então, eu dei oerro pq eh o mesmo, n era errado ter um $J, eh pq eu tinha tentado com $J mas n deu certo, dai tirei de lah e esqueci de tirar daqui, anyway, aqui o codigo completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Papelaria Papel Carmim - Listas Escolares</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/><!--Google Analytics-->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">var pageTracker = _gat._getTracker("UA-8222554-34");
pageTracker._trackPageview();
} catch(err) {}</script><!-- Litebox -->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<style type="text/css">background-image: url(images/bg.jpg);
margin-left: 0px;
margin-top: 00px;
margin-right: 0px;
margin-bottom: 0px;
}
#espiral{
background-image:url(images/espiral_repeat.jpg);
background-repeat:repeat-y;
}
#folha{
background-image:url(images/folha_repeat.jpg);
background-repeat:repeat-y;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
}
.style3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
.style7 {
font-size: 11px;
color: #FFFFFF;
}font-size: 22px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: 500;
clip: auto;
text-decoration: inherit;
}
.txt {
font-family: Geneva, Arial, Helvetica, sans-serif;
clip: auto;
font-size: 12px;
font-weight: 600;
color: #000000;
}text-decoration: none;
}text-decoration: none;
}text-decoration: none;
}text-decoration: none;
}
.window{
display:none;
width:300px;
height:300px;
position:absolute;
left:0;
top:0;
background:#FFF;
z-index:9900;
padding:10px;
border-radius:10px;
}
#mascara{
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}.fechar{display:block; text-align:right;}
</style>
<!--Fireworks CS3 Dreamweaver CS3 target. Created Tue Nov 10 11:52:56 GMT-0200 2009-->
<script type="text/javascript">
$(document).ready(function(){
$("a[rel=modal]").click( function(ev){
ev.preventDefault();
var id = $(this).attr("href");
var alturaTela = $(document).height();
var larguraTela = $(window).width();
//colocando o fundo preto
$('#mascara').css({'width':larguraTela,'height':alturaTela});
$('#mascara').fadeIn(1000);
$('#mascara').fadeTo("slow",0.8);
var left = ($(window).width() /2) - ( $(id).width() / 2 );
var top = ($(window).height() / 2) - ( $(id).height() / 2 );
$(id).css({'top':top,'left':left});
$(id).show();
});
$("#mascara").click( function(){
$(this).hide();
$(".window").hide();
});
$('.fechar').click(function(ev){
ev.preventDefault();
$("#mascara").hide();
$(".window").hide();
});
});
</script>
</head>
<body bgcolor="#ffffff">
<div class="window" id="janela1">
<a href="#" class="fechar">X Fechar</a>
<?php require_once 'orcamento.php'; ?>
</div>
<div id="mascara"></div>
<table border="0" cellpadding="0" cellspacing="0" width="780" align="center"> <tr>
<td><img src="images/spacer.gif" width="23" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="220" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="14" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="55" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="51" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="393" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="20" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="4" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="9" valign="top" style="position: relative; background: url('images/topo.jpg') no-repeat;">
<a href="http://www.facebook.com/#!/papelaria.papelcarmim" target="_blank"><img src="images/facebook.png" style="position: absolute; top: 85px; left: 1;" border="0" id="facebook" /></a>
<img src="images/spacer.gif" width="1" height="256" border="0" alt="" />
</td>
</tr>
<tr>
<td rowspan="7"> </td>
<td rowspan="4" valign="top"><img src="images/menu.jpg" alt="" name="menu" width="213" height="184" border="0" usemap="#menuMap" id="menu" style="margin-left: 3px;" /></td>
<td rowspan="7"> </td>
<td id="espiral" rowspan="2" width="55" height="152" valign="top"><img name="espiral_top" src="images/espiral_top.jpg" width="55" height="152" border="0" id="espiral_top" alt="" /></td>
<td colspan="2" valign="middle"><span class="TÃtulo"> Lista Escolar PRÉ II</span></td>
<td id="folha" rowspan="2" colspan="2" valign="top"><img name="folha_top" src="images/folha_top.jpg" width="24" height="152" border="0" id="folha_top" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="64" border="0" alt="" /></td>
</tr>
<tr>
<td width="444" colspan="2" rowspan="4" align="left" valign="top" class="txt" style="position: relative;">
Código da Lista: <b style="color: #006FA7;">PPC001</b><a href="#janela1" rel="modal"><img src="images/botao.png" alt="Solicite Agora" style="position: absolute; top: -50px; left: 295px;" /></a><br /><br />
<table border="1" cellpadding="5" cellspacing="0" style="font-weight: lighter;">
<tr>
<th>Produto</th>
<th>Quantidade</th>
</tr>
<tr>
<td>ALFABETO MÓVEL EM E.V. A COMPLETO, A VENDA NA ESCOLA (R$4,00) </td>
<td >01</td>
</tr>
<tr>
<td>CADERNOS DESENHO GRANDES (CAPA DURA) – 96 FOLHAS</td>
<td>02</td>
</tr>
<tr>
<td>CADERNOS DESENHO GRANDES (CAPA DURA) – 96 FOLHAS</td>
<td>02</td>
</tr>
<tr>
<td>CAIXAS DE LÁPIS DE COR</td>
<td>02</td>
</tr>
<tr>
<td>CAIXA DE GIZ DE CERA</td>
<td>01</td>
</tr>
<tr>
<td>CAIXAS DE MASSINHA DE MODELAR</td>
<td>03</td>
</tr>
<tr>
<td>ESTOJOS DE CANETINHAS</td>
<td>02</td>
</tr>
<tr>
<td>PACOTES DE SULFITE BRANCO</td>
<td>03</td>
</tr>
<tr>
<td>PACOTE DE SULFITE COLORIDO</td>
<td>01</td>
</tr>
<tr>
<td>LÁPIS</td>
<td>06</td>
</tr>
<tr>
<td>BORRACHAS BRANCAS</td>
<td>02</td>
</tr>
<tr>
<td>APONTADORES</td>
<td>02</td>
</tr>
<tr>
<td>TUBOS DE COLA</td>
<td>02</td>
</tr>
<tr>
<td>BRINQUEDO PARA AREIA</td>
<td>01</td>
</tr>
<tr>
<td>LIVRO DE HISTÓRIA DE QUALIDADE</td>
<td>01</td>
</tr>
<tr>
<td>GIBI</td>
<td>01</td>
</tr>
<tr>
<td>AGENDA ESCOLAR – VENDA NA ESCOLA (R$6,00)</td>
<td>01</td>
</tr>
<tr>
<td>PASTA COM ELÁSTICO LARGA (POLIONDA)</td>
<td>01</td>
</tr>
<tr>
<td>PASTA SIMPLES PARA TAREFA DE CASA</td>
<td>01</td>
</tr>
<tr>
<td>ENVELOPES GRANDES</td>
<td>02</td>
</tr>
<tr>
<td>CD VIRGEM</td>
<td>01</td>
</tr>
</table><br />
<p>Solicitamos também, que enviem no primeiro dia de aula:<br /><br />
- 1 foto da família com a criança, para realização de atividades, a foto será devolvida posteriormente.<br />
- 1 poste plástico tamanho médio para guardar o alfabeto móvel.<br /><br />
</p>
<b>Observações:</b><br />
<p>- Os materiais deverão vir etiquetados com o nome da criança;<br />
- As aulas terão início no dia 21/02/2013;<br />
- O uniforme deve ter o nome da criança.<br />
- Horário: manhã – 07h30min às 11h30min.<br />
tarde - 13h15min às 17h15min.<br /><br />
14/02/2013 – Reunião com a professora e entrega de materiais, que deverão vir etiquetados e encapados.<br />
Manhã: 08h<br />
Tarde: 14h<br />
Imprescindível a presença dos pais neste dia.<br /><br />
Para a adaptação das crianças na instituição, nos dias 21 e 22/02/2013 elas permanecem na escola somente até o horário do recreio.
</p>
<p> </p>
<p> </p></td>
<td><img src="images/spacer.gif" width="1" height="88" border="0" alt="" /></td>
</tr>
<tr>
<td id="espiral"></td>
<td colspan="2" id="folha"><img name="folha_repeat" src="images/folha_repeat.jpg" width="24" height="20" border="0" id="folha_repeat" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="20" border="0" alt="" /></td>
</tr>
<tr>
<td id="espiral" colspan="1" width="55" height="20" valign="bottom"></td>
<td id="folha" rowspan="2" colspan="2"> </td>
<td><img src="images/spacer.gif" width="1" height="12" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="3" valign="top"></td>
<td id="espiral" valign="bottom"><img name="espiral_bt" src="images/espiral_bt.jpg" width="55" height="156" border="0" id="espiral_bt" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="5" valign="top"><img name="cd_b" src="images/cd_b.jpg" width="523" height="36" border="0" id="cd_b" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="26" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="1" height="10" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="7" align="right" background="images/botton_menu_bg.jpg">
<span class="style3"><a href="index.htm" class="style3">Home</a> <a href="produtos.htm" class="style3">Produtos</a> <a href="servicos.htm" class="style3">Serviços</a> <a href="localizacao.htm" class="style3">Localização</a> <a href="contato.htm" class="style3">Contato</a> </span></td>
<td><img name="botton_menu_bg" src="images/botton_menu_bg.jpg" width="4" height="42" border="0" id="botton_menu_bg" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="42" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="7" background="images/botton_preto_bg.jpg"><span class="style1"> </span><span class="style2"><a href="http://www.cgdw.com.br" class="style3">CGDW</a> - Todos os direitos reservados</span></td>
<td><img name="botton_preto_bg" src="images/botton_preto_bg.jpg" width="4" height="43" border="0" id="botton_preto_bg" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="43" border="0" alt="" /></td>
</tr>
</table>
<map name="topo_logoMap" id="topo_logoMap"><area shape="rect" coords="95,41,328,185" href="index.htm" alt="Papelaria Papel Carmim" />
</map>
<map name="menuMap" id="menuMap"><area shape="rect" coords="44,22,87,39" href="index.htm" alt="Home" />
<area shape="rect" coords="42,46,113,65" href="produtos.htm" alt="Produtos" />
<area shape="rect" coords="41,76,114,95" href="servicos.htm" alt="Serviços" />
<area shape="rect" coords="45,127,130,149" href="localizacao.htm" alt="Localização" />
<area shape="rect" coords="42,153,105,173" href="contato.htm" alt="" />
<area shape="rect" coords="46,104,158,121" href="listas-escolares.html" />
</map>
<map name="promoMap" id="promoMap">
<area shape="poly" coords="25,38,156,2,176,72,188,136,55,174" href="promo.htm" alt="Promoções" />
</map></body>
</html>você ta importando scriptaculous e jquery. As duas libs usam o $.
Leia:
http://wbruno.com.br/2011/08/24/noconflict-jquery-usando-2-bibliotecas-javascript-alias/
>
você ta importando scriptaculous e jquery. As duas libs usam o $.
Leia:
http://wbruno.com.br/2011/08/24/noconflict-jquery-usando-2-bibliotecas-javascript-alias/
Então usei o noconflict e $j no jquery e deu certo, muito obrigado :D
Segue um exemplo simples, dê uma olhada e veja o que esta fazendo de errado ! :D
Aperte CTRL + U após acessar o site, e veja seu código fonte.
AQUI!