[Resolvido] Problema com modal

NetBoy16 · Dezembro 10, 2012

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 ?

Bru_ce · Dezembro 10, 2012

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!

William Bruno · Dezembro 10, 2012

confira se aparece algum erro no console:

http://wbruno.com.br/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

NetBoy16 · Dezembro 10, 2012

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 :/

William Bruno · Dezembro 10, 2012

não tem nada de $J no código que você postou.

procure e corrija.

NetBoy16 · Dezembro 10, 2012

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 :(

William Bruno · Dezembro 10, 2012

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.

NetBoy16 · Dezembro 10, 2012

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> 
<!--favicon-->
<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">
try {
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">
td img {display: block;}
body {
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;
}
.TÃtulo {
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;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
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">
<!-- fwtable fwsrc="template_papelaria copy.png" fwpage="Page 1" fwbase="template_papelaria copy.jpg" fwstyle="Dreamweaver" fwdocid = "295738671" fwnested="0" -->
 <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>

William Bruno · Dezembro 10, 2012

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/

NetBoy16 · Dezembro 10, 2012

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

Arquivado

[Resolvido] Problema com modal

Recommended Posts

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante