[Resolvido] Chamar janela modal via Javascript

LadyAra · Janeiro 18, 2011

Bom dia :clap:

Será que poderiam me ajudar...não estou sabendo pelo que procurar já que não conheço todas as funções existentes de javascript

mas é assim...

tenho um botão que ao clicar abre uma janela modal(lightbox) sobre a principal.Até ai tudo bem.

Mas em outra parte do projeto(no mesmo .php)...preciso que essa janela modal...abra se e somente se o cadastro for realizado com sucesso

ou seja

eu já tenho

<script type="text/javascript">	
alert("Pessoa cadastrada com sucesso!!");
window.location="http://localhost/QQ/pagina_perguntas_q.php";
</script>

Mas não é uma janela de alert com um botão que eu quero

eu efetuo o cadastro..if(sql){

aqui ao invés de um alert...queria que chamasse minha janela modal que é feita usando javascript também

}

isso é possivel??Eu já vi chamando através de um botão...mas o único botão que tenho na tela é o de submeter os dados para cadastros...quando disparado...efetua os cadastro no banco e só depois deveria chamar a janela modal

Não faço o cadastro na minha janela modal, pois ela é apenas uma div oculta no mesmo html do formulário

abaixo o código da minha janela modal-por enquanto é um botão..mas não é pra ser.

<div id="botaofeedback">
         <a href="#regulamento" name="modal"><img src="images/botaoRegulamento.png"/></a>     
               <div id="regulamento" class="window">
               <br />
               <br />
               <br />
               <br />
               <br />
                     <label id="frase">Parabéns,</label> <label id="nome_cadastrado"><?php echo "$nome"; ?></label>
                     <label id="frasecont">sua aposta foi realizada</label>
                     <label id="frasesucesso">com sucesso!</label>
     <a href="#" class="close"><img src="images/botaoOK2.png"/></a>    
      </div>
   </div>
     <div id="mask"></div> 
     </div>

E aqui o javascript que faz o tratamento da janela modal quando o botão é clicado

<script type="text/javascript"> 

$(document).ready(function() {   

  $('a[name=modal]').click(function(e) {
     e.preventDefault();

     var id = $(this).attr('href');

     var maskHeight = $(document).height();
     var maskWidth = $(window).width();

     $('#mask').css({'width':maskWidth,'height':maskHeight});

     $('#mask').fadeIn(1000);   
     $('#mask').fadeTo("slow",0.8);   

     //Get the window height and width
     var winH = $(window).height();
     var winW = $(window).width();

     $(id).css('top',  winH/2-$(id).height()/2);
     $(id).css('left', winW/2-$(id).width()/2);

     $(id).fadeIn(2000); 

  });

  $('.window .close').click(function (e) {
     e.preventDefault();

     $('#mask').hide();
     $('.window').hide();
  });      

  $('#mask').click(function () {
     $(this).hide();
     $('.window').hide();
  });         

});

</script>

A dúvida é...existe um função javascript que dispara outro javascript(chama a div)?

Não pode haver um botão...eu queria que quando o cadastro for efetuado ..automaticamente(sem clicar em mais nada)chamar minha div botaofeedback...isso é possivel?

Eu pensei numa javascript que disparasse o botão(como se alguém clicasse...vou deixar o botão oculto tb).

Alguma idéia?

Obrigada

William Bruno · Janeiro 18, 2011

coloca isso aqui:

      var id = $(this).attr('href');

     var maskHeight = $(document).height();
     var maskWidth = $(window).width();

     $('#mask').css({'width':maskWidth,'height':maskHeight});

     $('#mask').fadeIn(1000);   
     $('#mask').fadeTo("slow",0.8);   

     //Get the window height and width
     var winH = $(window).height();
     var winW = $(window).width();

     $(id).css('top',  winH/2-$(id).height()/2);
     $(id).css('left', winW/2-$(id).width()/2);

     $(id).fadeIn(2000);

numa function, mais ou menos assim:

function abre_modal( id )
{   
     var maskHeight = $(document).height();
     var maskWidth = $(window).width();

     $('#mask').css({'width':maskWidth,'height':maskHeight});

     $('#mask').fadeIn(1000);   
     $('#mask').fadeTo("slow",0.8);   

     //Get the window height and width
     var winH = $(window).height();
     var winW = $(window).width();

     $(id).css('top',  winH/2-$(id).height()/2);
     $(id).css('left', winW/2-$(id).width()/2);

     $(id).fadeIn(2000); 
}

e então, a chamada do link ficará:

$('a[name=modal]').click(function(e) {
  e.preventDefault();
  abre_modal( $( this ).attr('href') );
});

ai no teu 'if sql', basta:

if( $sql ){
  echo '<script type="text/javascript">abre_modal( \'#botaofeedback\' );</script>';
}

LadyAra · Janeiro 18, 2011

Perdoei-me a ignorância, mas creio que não estou sabendo montar...já que não funciona..cadastra normalmente mas não aparece a janela. :(

Montei assim

<script type="text/javascript"> 

 function abre_modal(id) {   

     $('a[name=modal]').click(function(e) {
       e.preventDefault();
       abre_modal( $( this ).attr('href') );
    }

 var maskHeight = $(document).height();
     var maskWidth = $(window).width();

     $('#mask').css({'width':maskWidth,'height':maskHeight});

     $('#mask').fadeIn(1000);   
     $('#mask').fadeTo("slow",0.8);   

     //Get the window height and width
     var winH = $(window).height();
     var winW = $(window).width();

     $(id).css('top',  winH/2-$(id).height()/2);
     $(id).css('left', winW/2-$(id).width()/2);

     $(id).fadeIn(2000); 

  });

  $('.window .close').click(function (e) {
     e.preventDefault();

     $('#mask').hide();
     $('.window').hide();
  });      

  $('#mask').click(function () {
     $(this).hide();
     $('.window').hide();
  });         

});
</script>

o botão não mudei nada por enquanto...

e adicionei o if(sql) igual ao seu...tirando o alert apenas.

William Bruno · Janeiro 18, 2011

você fez completamente errado.

confira o meu post novamente.

correto:

<script type="text/javascript">
$(document).ready(function(){
$('a[name=modal]').click(function( e ){
	e.preventDefault();
	abre_modal( $( this ).attr('href') );
});
$('.window .close').click(function(e){
	e.preventDefault();

	$('#mask').hide();
	$('.window').hide();
});      

$('#mask').click(function(){
	$(this).hide();
	$('.window').hide();
});
});
function abre_modal( id ) 
{
var maskHeight = $(document).height();
var maskWidth = $(window).width();

$('#mask').css({'width':maskWidth,'height':maskHeight});

$('#mask').fadeIn(1000);   
$('#mask').fadeTo("slow",0.8);   

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

$( id ).css('top',  winH/2-$(id).height()/2);
$( id ).css('left', winW/2-$(id).width()/2);

$( id ).fadeIn(2000); 
}
</script>

LadyAra · Janeiro 18, 2011

Nossa realmente eu passei longe do certo...

Mas...testei o jeito que tu acabou de passar e o resultado continua o mesmo...a janela não abre. :ermm:

William Bruno · Janeiro 18, 2011

tá.. mostra como ficou o teu if

aperte Ctrl+Shif+J no Firefox, e veja qual erro ele aponta.

LadyAra · Janeiro 18, 2011

	//query para inserir os dados
		 $sql = "INSERT INTO `pessoa`( `id_pessoa` , `nome_pessoa` , `email`, `setor`)VALUES (NULL, '$nome', '$email', 'bola')";
		        $sql2 = "INSERT INTO `aposta`( `id_aposta` , `jogo_aposta` , `pessoa_aposta` , `valor_apostaUm`, `valor_apostaDois`)VALUES (NULL, '$id_jogo' , '$nome', '$campoapostaUm', '$campoapostaDois')";  
	mysql_query($sql);
	mysql_query($sql2);	
	if($sql){
		if($ql2){
            echo '<script type="text/javascript">abre_modal(\'botaofeedback\');</script>';
                 }
	}
		}
}

Tentei com um if só também não deu...

Tentei das seguintes formas

  if(sql){
     echo '<script type="text/javascript">abre_modal( \'#botaofeedback\' );</script>';
}
---------------

if(sql){
 if(sql2){
   echo '<script type="text/javascript">abre_modal( \'#regulamento\' );</script>';
}
}

---------------------------------------
if($ql2){
      echo '<script type="text/javascript">abre_modal(\'#botaofeedback\');</script>';
  }

}

Enfim....mudei o botão..o nome da div...tentei chamar o id interno que é o regulamento ao invés do principal da janela que é botaofeedback

quanto aos erros...nossa...

Alerta: Erro no processamento do valor de “background-color”. Declaração ignorada.

Arquivo-fonte: http://localhost/Bola/home.php

Linha: 0

Alerta: Esperado nome da propriedade da mídia mas encontrado “-webkit-min-device-pixel-ratio”.

Arquivo-fonte: http://localhost/Bola/css/cadastro_bola.css

Linha: 80

Alerta: Propriedade desconhecida “weight”. Declaração ignorada.

Arquivo-fonte: http://localhost/Bola/css/teclado.css

Linha: 33

Erro: missing ) after argument list

Arquivo-fonte: http://localhost/Bola/pagina_cadastro_bola.php

Linha: 17, Coluna: 3

Código-fonte:

$('.window .close').click(function (e) {

Tem um seta verde apontando para $...

William Bruno · Janeiro 18, 2011

^_^

Os erros são teus amigos.

Vá corrigindo eles, sem eles, se não funcionar, você não saberia por onde começar. Com eles, basta ir eliminando um por um.

o teu if está sem lógica.

Veja sobre o retorno do mysql_query(), você tá testando a string ali, não faz o menor sentido.

você linkou corretamente a biblioteca jQuery ?

boa sorte :lol:

LadyAra · Janeiro 18, 2011

quanto ao banco está funcionando sim.

se no lugar do echo eu colocar um alert javascript...funciona...

Bom..Vou continuar tentando aqui..grata pela ajuda B)

William Bruno · Janeiro 18, 2011

quanto ao banco está funcionando sim.

nem tanto, pq se a tua query voltar um erro, o teu if vai passar direto, e dizer que 'deu certo.

por isso eu disse que está errado.

Bom..Vou continuar tentando aqui..grata pela ajuda B)

você linkou a biblioteca jQuery?

http://docs.jquery.com/Downloading_jQuery

LadyAra · Janeiro 18, 2011

Bom eu uso ela assim:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
<script type="text/javascript">
</script>

Vou salvar e colocar numa pasta...=)

William Bruno · Janeiro 18, 2011

vi um erro de sintaxe ali.

troca:

        $('a[name=modal]').click(function( e ){
               e.preventDefault();
               abre_modal( $( this ).attr('href') );
       }

por:

        $('a[name=modal]').click(function( e ){
               e.preventDefault();
               abre_modal( $( this ).attr('href') );
       });

tudo bem, pode usar do googlecode mesmo, é que tem gente que nem linka o jQuery e quer que funcione.

Conseguiu corrijir os outros erros que apareceu ? o de sintaxe do $, era a falta desse );

LadyAra · Janeiro 18, 2011

Troquei..nada ainda

Deu o mesmo erro

Erro: missing ) after argument list
Arquivo-fonte: http://localhost/Bola/pagina_cadastro_bolao.php
Linha: 17, Coluna: 3
Código-fonte:
  $('.window .close').click(function (e) {

Mas pode ser pq ainda estou corrigindo os warning(Alerta) que apareceu...

nem sabia da existência desse control shift J...valeu a dica.

William Bruno · Janeiro 18, 2011

use o Responder Azul:
ou a 'Resposta Rápida'.

estranho.. troca:

 $('.window .close').click(function (e) {

por:

 $('.close').click(function( e ){

se ainda voltar erros nesse script js, poste como está o teu código atual.

sempre que alterar algo no codigo, clique em Limpar|Clear da janelinha do Ctrl+Shif+J

assim você não verá 'erros passados'.

E então aperte F5, para que o navegador reprocesse o teu documento.

LadyAra · Janeiro 18, 2011

ops..foi mal...agora pelo resposta rápida

troquei..não deu erro nenhum, mas também não abriu a janela

só os alerta para meu css..dizendo que não reconhece a propriedade tamanho e largura...vou corrigi-los aqui..não sei se tem haver já que fiz um .css separado para o div do botao feedback.

meu código atual é esse

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript">

$(document).ready(function(){
       $('a[name=modal]').click(function( e ){
               e.preventDefault();
               abre_modal( $( this ).attr('href') );
       });
 $('.close').click(function( e ){
     e.preventDefault();

     $('#mask').hide();
     $('.window').hide();
  });      

  $('#mask').click(function () {
     $(this).hide();
     $('.window').hide();
  }); 
});

   function abre_modal(id) 
  {
       var maskHeight = $(document).height();
       var maskWidth = $(window).width();

       $('#mask').css({'width':maskWidth,'height':maskHeight});

       $('#mask').fadeIn(1000);   
       $('#mask').fadeTo("slow",0.8);   

       //Get the window height and width
       var winH = $(window).height();
       var winW = $(window).width();

       $( id ).css('top',  winH/2-$(id).height()/2);
       $( id ).css('left', winW/2-$(id).width()/2);

       $( id ).fadeIn(2000); 
}
</script>

SQL ( eu não mudei o if que tu disse que não tinha lógica...estou procurando..tentei verificar se true..mas passou direto tb rs Estou pesquisando pois em todo documento eu uso daquele jeito..achei que estivesse certo..

mysql_query($sql);
	mysql_query($sql2);	

               echo '<script type="text/javascript">abre_modal(\'#botaofeedback\');</script>';


		}

E por fim a janela modal

<div id="botaofeedback">
         <a href="#regulamento" name="modal"><img src="images/botaoRegulamento.png"/></a>     
               <div id="regulamento" class="window">
               <br />
               <br />
               <br />
               <br />
               <br />
                     <label id="frase">Parabéns,</label> <label id="nome_cadastrado"><?php echo "$nome"; ?></label>
                     <label id="frasecont">sua aposta foi realizada</label>
                     <label id="frasesucesso">com sucesso!</label>
     <a href="#" class="close"><img src="images/botaoOK2.png"/></a>    
      </div>
   </div>
     <div id="mask"></div> 
     </div>

Ahh..eu ainda não escondi o botão..deixei ele pequeninooo no rodapé pra testar...se clicar no botão..a janela modal abre..prova que seu script funciona.. :clap:

William Bruno · Janeiro 18, 2011

tá.. o if 'correto', poderia ser assim:

$query = mysql_query($sql2);     

if( $query )//agora estou testando o retorno do mysql_query
     echo '<script type="text/javascript">abre_modal(\'#botaofeedback\');</script>';

onde está esse IF? a função abre_modal() está definida nesse escopo ?

tem que ter algum erro.. se não, não vamos conseguir prosseguir.

para debugar, qndo você fizer a query, e vermos se pelo menos a função está sendo chamada, adicione este alerta:

function abre_modal(id) 
{
  alert( id );//depois que terminarmos os testes, remova isso

a grande pergunta aqui é:

onde está esse código php ? em que arquivo ?

LadyAra · Janeiro 18, 2011

meu arquivo é .php

formulário form do html

e uso o .php para cadastrar e para os echo

Fiz o que tu disse...

Tu acha que um javascript interfere no outro??

pois tenho outro javascript na página..pois uso um teclado virtual...e meu javascript serve para aparecer as letrinhas nos input quando a pessoa clica...

Nenhum erro voltou nem seu alert javascript apareceu..(Nota: seu alert só aparece quando eu clico no botão)

quanto aos alerta do Firefox...verifiquei e o mozila não reconhece esse hack pro google chrome

@media screen and (-webkit-min-device-pixel-ratio:0){ }

por isso que aparece os alert...

William Bruno · Janeiro 18, 2011

meu arquivo é .php

formulário form do html

e uso o .php para cadastrar e para os echo

então você tem um arquivo php pro form

e um arquivo .php diferente que cadastra e faz os echos ?

então o problema é escopo mesmo.

poste esses arquivos completos aqui, inclusive com a tag <form>

LadyAra · Janeiro 18, 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/cadastro.css">
<link rel="stylesheet" href="css/teclado.css" />
<link rel="stylesheet" href="css/feedback.css" />
<title>Cadastro</title>
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript">

$(document).ready(function(){
       $('a[name=modal]').click(function( e ){
               e.preventDefault();
               abre_modal( $( this ).attr('href') );
       });
 $('.close').click(function( e ){
     e.preventDefault();

     $('#mask').hide();
     $('.window').hide();
  });      

  $('#mask').click(function () {
     $(this).hide();
     $('.window').hide();
  }); 
});

   function abre_modal(id) 
  {
    alert( id );
       var maskHeight = $(document).height();
       var maskWidth = $(window).width();

       $('#mask').css({'width':maskWidth,'height':maskHeight});

       $('#mask').fadeIn(1000);   
       $('#mask').fadeTo("slow",0.8);   

       //Get the window height and width
       var winH = $(window).height();
       var winW = $(window).width();

       $( id ).css('top',  winH/2-$(id).height()/2);
       $( id ).css('left', winW/2-$(id).width()/2);

       $( id ).fadeIn(2000); 
}
</script>

</head>
<body>
<?php
require('pagina_alterar.php');

 // Recupera os dados dos campos
       $id = $_POST['id_jogo'];
$campoUm = $_POST['campoapostaUm'];
$campoDois = $_POST['campoapostaDois'];

// Conexão com o banco de dados
include('conection.php');
// Se o usuário clicou no botão cadastrar efetua as ações
if ($_POST['enviar']) {

$nome = $_POST["nome"];
$email = $_POST["email"];
$id = $_POST['id'];
$campoapostaUm = $_POST['campoapostaUm'];
$campoapostaDois = $_POST['campoapostaDois'];

if($nome=="" || $email =="" || $campoapostaUm=="" || $campoapostaDois==""){ ?>
                                <div id="formulario">
                           <h1> Falha na inscrição</h1>
                           <p style="font-size:17px;"> Infelizmente não foi possível inserir nova aposta, o preenchimento dos todos os campos é obrigatório.</p>
                           <a href="pagina_cadastro_bola.php"><h2 style="font-size:16px; margin:auto; width:149px;"> Voltar</h2></a>
            <?php    } else{	
//query para inserir os dados
		 $sql = "INSERT INTO `pessoa`( `id_pessoa` , `nome_pessoa` , `email`, `setor`)VALUES (NULL, '$nome', '$email', 'bola')";
		        $sql2 = "INSERT INTO `aposta`( `id_aposta` , `jogo_aposta` , `pessoa_aposta` , `valor_apostaUm`, `valor_apostaDois`)VALUES (NULL, '$id' , '$nome', '$campoapostaUm', '$campoapostaDois')";  
	mysql_query($sql);
	mysql_query($sql2);	

             if( $query ){
     echo '<script type="text/javascript">abre_modal(\'#botaofeedback\');</script>';
		  }

		}
}

?>
<script type="text/javascript">
 // variável que controla qual campo de texto está ativo
var emailAtivo = false;
// variáveis que controlam o primeiro acesso aos campos de texto, onde apenas a primeira vez some com o 
// texto
var nomeIntocado = true;
var emailIntocado = true;
// bufferes de acentos
var bufferTil = false;
var bufferAgudo = false;
var bufferCircunflexo = false;

</script>
<div id="bolao">
     <div id="cabecalho">
              <div id="timeUm">  

                   <?php	

                        echo '<img src="'.$timeUm.'" width="190px;" height="190px;"/>';
                   ?>
                        <div id="resultadoUm">
                        <?php
					   /*Imprime o valor digitado na pagina aposta*/	
					 echo $campoUm;
					 ?>
                        </div>                    
              </div>               
              <div id="timeDois">
                   <?php

                     echo '<img src="'.$timeDois.'" width="190px;" height="190px;"/>';
                ?>
                        <div id="resultadoDois">
                        <?php
					 /*Imprime o valor digitado na pagina aposta*/						
					 echo $campoDois;
					 ?>
                        </div>
              </div> 
      </div>   
      <div id="conteudo">
          <div id="teclado">
                 <form action="" method="post">
                <span class="preencher"> <input  autocomplete="off" type="text" class="preencher" value="Nome" id="nome"  name="nome" onfocus="sumir('nome')" /> 
                </span>    

                <span class="preencher"> <input type="text"  autocomplete="off" class="preencher" value="Email" id="email" name="email" onfocus="sumir('email')" /> 
                </span>               
                <li id="auto">
<p>
<a id="q" onmousedown="mudar('q')" onmouseup="inverter('q')" href="javascript://" valor="q">
q </a>
<a id="w" onmousedown="mudar('w')" onmouseup="inverter('w')" href="javascript://" valor="w">
w </a>
<a id="e" onmousedown="mudar('e')" onmouseup="inverter('e')" href="javascript://" valor="e">
e </a>
<a id="r" onmousedown="mudar('r')" onmouseup="inverter('r')" href="javascript://" valor="r">
r </a>
<a id="t" onmousedown="mudar('t')" onmouseup="inverter('t')" href="javascript://" valor="t">
t </a>
<a id="y" onmousedown="mudar('y')" onmouseup="inverter('y')" href="javascript://" valor="y">
y </a>
<a id="u" onmousedown="mudar('u')" onmouseup="inverter('u')" href="javascript://" valor="u">
u </a>
<a id="i" onmousedown="mudar('i')" onmouseup="inverter('i')" href="javascript://" valor="i">
i </a>
<a id="o" onmousedown="mudar('o')" onmouseup="inverter('o')" href="javascript://" valor="o">
o </a>
<a id="p"  onmousedown="mudar('p')" onmouseup="inverter('p')"  href="javascript://" valor="p">
p </a>
<a id="´"  onmousedown="mudar('´')" onmouseup="inverter('´')" href="javascript://" valor="´">
´ </a>
<a id="7"  onmousedown="mudar('7')" onmouseup="inverter('7')"  href="javascript://" valor="7">
7 </a>
<a id="8"  onmousedown="mudar('8')" onmouseup="inverter('8')"  href="javascript://" valor="8">
8 </a>
<a id="9"  onmousedown="mudar('9')" onmouseup="inverter('9')"  href="javascript://" valor="9">
9 </a>
</p>
<p>
<a id="a" onmousedown="mudar('a')" onmouseup="inverter('a')"  href="javascript://" valor="a">
a </a>
<a id="s"  onmousedown="mudar('s')" onmouseup="inverter('s')"  href="javascript://" valor="s">
s </a>
<a id="d" onmousedown="mudar('d')" onmouseup="inverter('d')"  href="javascript://" valor="d">
d </a>
<a id="f"  onmousedown="mudar('f')" onmouseup="inverter('f')"  href="javascript://" valor="f">
f </a>
<a id="g"  onmousedown="mudar('g')" onmouseup="inverter('g')"  href="javascript://" valor="g">
g </a>
<a id="h"  onmousedown="mudar('h')" onmouseup="inverter('h')"  href="javascript://" valor="h">
h </a>
<a id="j" onmousedown="mudar('j')" onmouseup="inverter('j')"  href="javascript://" valor="j">
j </a>
<a id="k"  onmousedown="mudar('k')" onmouseup="inverter('k')"  href="javascript://" valor="k">
k </a>
<a id="l" onmousedown="mudar('l')" onmouseup="inverter('l')"  href="javascript://" valor="l">
l </a>
<a id="ç"  onmousedown="mudar('ç')" onmouseup="inverter('ç')"  href="javascript://" valor="ç">
ç </a>
<a id="~"  onmousedown="mudar('~')" onmouseup="inverter('~')" href="javascript://" valor="~">
~ </a>
<a id="4"  onmousedown="mudar('4')" onmouseup="inverter('4')"  href="javascript://" valor="4">
4 </a>
<a id="5"  onmousedown="mudar('5')" onmouseup="inverter('5')"  href="javascript://" valor="5">
5 </a>
<a id="6"  onmousedown="mudar('6')" onmouseup="inverter('6')"  href="javascript://" valor="6">
6 </a>
</p>
<p>
<a id="z"  onmousedown="mudar('z')" onmouseup="inverter('z')"  href="javascript://" valor="z">
z </a>
<a id="x"  onmousedown="mudar('x')" onmouseup="inverter('x')"  href="javascript://" valor="x">
x </a>
<a id="c"  onmousedown="mudar('c')" onmouseup="inverter('c')"  href="javascript://" valor="c">
c </a>
<a id="v"  onmousedown="mudar('v')" onmouseup="inverter('v')"  href="javascript://" valor="v">
v </a>
<a id="b" onmousedown="mudar('b')" onmouseup="inverter('b')" href="javascript://" valor="b">
b </a>
<a id="n" onmousedown="mudar('n')" onmouseup="inverter('n')" href="javascript://" valor="n">
n </a>
<a id="m" onmousedown="mudar('m')" onmouseup="inverter('m')" href="javascript://" valor="m">
m </a>
<a id="-" onmousedown="mudar('-')" onmouseup="inverter('-')" href="javascript://" valor="-">
- </a>
<a id="_" onmousedown="mudar('_')" onmouseup="inverter('_')" href="javascript://" valor="_">
_ </a>
<a id="^" onmousedown="mudar('^')" onmouseup="inverter('^')" href="javascript://" valor="^">
^ </a>
<a id="." onmousedown="mudar('.')" onmouseup="inverter('.')" href="javascript://" valor=".">
. </a>


<a id="1" onmousedown="mudar('1')" onmouseup="inverter('1')" href="javascript://" valor="1">
1 </a>
<a id="2" onmousedown="mudar('2')" onmouseup="inverter('2')" href="javascript://" valor="2">
2 </a>
<a id="3" onmousedown="mudar('3')" onmouseup="inverter('3')" href="javascript://" valor="3">
3 </a>
</p>
<p>
<a id="capslock-tecla" onmousedown="mudarcaps('capslock-tecla')"  onmouseup="invertercaps('capslock-tecla')" href="javascript://" valor="capslock">
capslock </a>
<a id="espaco" onmousedown="mudarEspaco()" onmouseup="inverterEspaco()" onclick="adicionaEspaco()" href="javascript://" valor="espaço">
</a>
<a id="vazio" >
</a>
<a id="del" onclick="deletar()"  onmousedown="mudar('del')" onmouseup="inverter('del')" href="javascript://" valor="del">del </a>
<a id="0" onmousedown="mudar('0')" onmouseup="inverter('0')" href="javascript://" valor="0">
0 </a>
<a id="@" onmousedown="mudar('@')" onmouseup="inverter('@')" href="javascript://" valor="@">
@ </a>
</p>
</li>
          </div>   
     </div>   
     <div id="rodape">
              <div id="logo"></div>
              <div id="logoS"></div>
              <div id="botaoVoltar">
                     <a class="botaoVoltar" href="#"><img src="images/botaoVoltar.png"/></a>
              </div>
              <div id="botaoOk">
              <input type="hidden" name="id_jogo" id="id_jogo" value="<?php echo"$id_jogo";?>" />
              <input type="hidden" name="campoapostaUm" id="campoapostaUm" value="<?php echo"$campoUm";?>" />
              <input type="hidden" name="campoapostaDois" id="campoapostaDois" value="<?php echo"$campoDois";?>" />
              <input type="image"  name="enviar" value="submit" src="images/botaoOk.png" />
              </form>

              </div>
   </div>
</div> 
<div id="botaofeedback">
         <a href="#regulamento" name="modal"><img src="images/botaoRegulamento.png"/></a>     
               <div id="regulamento" class="window">
               <br />
               <br />
               <br />
               <br />
               <br />
                     <label id="frase">Parabéns,</label> <label id="nome_cadastrado"><?php echo "$nome"; ?></label>
                     <label id="frasecont">sua aposta foi realizada</label>
                     <label id="frasesucesso">com sucesso!</label>
     <a href="#" class="close"><img src="images/botaoOK2.png"/></a>    
      </div>
   </div>
     <div id="mask"></div> 
     </div>   
</body>
</html>
</body>
</html>
<script type="text/javascript"> 
// retira o texto inicial das caixas de texto, se for o caso , ao primeiro focus no campo passado como id
function sumir(id){

if(emailIntocado){
	emailIntocado = false;
	document.getElementById(id).value="";
}
else{
	nomeIntocado = false;
	document.getElementById(id).value="";
	}


	// atualiza qual campo está ativo
	if(id=="nome"){emailAtivo = false; }
		else{emailAtivo = true;}

}

// altera o layout do botão clicado e chama a função para acicionar um caracter no texto
function mudar(id) {
	document.getElementById(id).style.backgroundImage="url(images/tecla-fundo2.png)";
	document.getElementById(id).style.color="#ffffff";
	if(id!="del"){// caso a tecla apertada não for 'delete', contatena mais um caracter à caixa de texto


		adicionaTexto(id);
		}
	}

	// função do mouse-up, devolve o layout original
function inverter(id) {
	document.getElementById(id).style.backgroundImage="url(images/teclado.png)";
	document.getElementById(id).style.color="#808080";
	}

 // Função que adiciona, letra a letra, o  valor às caixas de texto
function adicionaTexto(id) {
	// verifica se foi um acento digitado, se sim
	if(id=="´" && !bufferAgudo) {bufferAgudo = true; return;}
	if(id=="~" && !bufferTil) {bufferTil = true; return;}
	if(id=="^" && !bufferCircunflexo) {bufferCircunflexo = true; return;}
	// veririca se o campo email está desabilitado, o que indica
	// que o campo de texto ativo é o nome
	if( !emailAtivo)
	{	// se não tiver adicionado nada ao campo ainda, ou seja, a string ainda é nome, limpar o campo
			if(nomeIntocado) sumir("nome");
			// adiciona o parâmetro à caixa de texto 'nome'
				// trata o acento ´
				if(bufferAgudo){
					switch (id){
						case 'a':
							document.getElementById("nome").value += 'á';
							bufferAgudo = false;
							break;
						case 'A':
							document.getElementById("nome").value += 'Á';
							bufferAgudo = false;
							break;
						case 'e':
							document.getElementById("nome").value += 'é';
							bufferAgudo = false;
							break;
						case 'E':
							document.getElementById("nome").value += 'É';
							bufferAgudo = false;
							break;
						case 'i':
							document.getElementById("nome").value += 'í';
							bufferAgudo = false;
							break;
						case 'I':
							document.getElementById("nome").value += 'Í';
							bufferAgudo = false;
							break;
						case 'o':
							document.getElementById("nome").value += 'ó';
							bufferAgudo = false;
							break;
						case 'O':
							document.getElementById("nome").value += 'Ó';
							bufferAgudo = false;
							break;
						case 'u':
							document.getElementById("nome").value += 'ú';
							bufferAgudo = false;
							break;
						case 'U':
							document.getElementById("nome").value += 'Ú';
							bufferAgudo = false;
							break;
						default:
							document.getElementById("nome").value += '´';
							document.getElementById("nome").value += id;
							bufferAgudo = false;

						}
						return;
					}
				// trata o acento ~
				if(bufferTil){
					switch (id){
						case 'a':
							document.getElementById("nome").value += 'ã';
							bufferTil = false;
							break;
						case 'A':
							document.getElementById("nome").value += 'Ã';
							bufferTil = false;
							break;
						case 'o':
							document.getElementById("nome").value += 'õ';
							bufferTil = false;
							break;
						case 'O':
							document.getElementById("nome").value += 'Õ';
							bufferTil = false;
							break;
						default:
							document.getElementById("nome").value += '~';
							document.getElementById("nome").value += id;
							bufferTil = false;

						}
						return;
					}	

				if(bufferCircunflexo){
					switch (id){
						case 'a':
							document.getElementById("nome").value += 'â';
							bufferCircunflexo = false;
							break;
						case 'A':
							document.getElementById("nome").value += 'Â';
							bufferCircunflexo = false;
							break;
						case 'e':
							document.getElementById("nome").value += 'ê';
							bufferCircunflexo = false;
							break;
						case 'E':
							document.getElementById("nome").value += 'Ê';
							bufferCircunflexo = false;
							break;
						case 'i':
							document.getElementById("nome").value += 'î';
							bufferCircunflexo = false;
							break;
						case 'I':
							document.getElementById("nome").value += 'Î';
							bufferCircunflexo = false;
							break;
						case 'o':
							document.getElementById("nome").value += 'ô';
							bufferCircunflexo = false;
							break;
						case 'O':
							document.getElementById("nome").value += 'Ô';
							bufferCircunflexo = false;
							break;
						case 'u':
							document.getElementById("nome").value += 'û';
							bufferCircunflexo = false;
							break;
						case 'U':
							document.getElementById("nome").value += 'Û';
							bufferCircunflexo = false;
							break;
						default:
							document.getElementById("nome").value += '^';
							document.getElementById("nome").value += id;
							bufferCircunflexo = false;

						}
						return;
					}

			document.getElementById("nome").value += id;
			nomeIntocado = false;
	}
	else{
		 // adiciona o parâmetro à caixa de texto 'email'
		 // trata o acento ´
				if(bufferAgudo){
					switch (id){
						case 'a':
							document.getElementById("email").value += 'á';
							bufferAgudo = false;
							break;
						case 'A':
							document.getElementById("email").value += 'Á';
							bufferAgudo = false;
							break;
						case 'e':
							document.getElementById("email").value += 'é';
							bufferAgudo = false;
							break;
						case 'E':
							document.getElementById("email").value += 'É';
							bufferAgudo = false;
							break;
						case 'i':
							document.getElementById("email").value += 'í';
							bufferAgudo = false;
							break;
						case 'I':
							document.getElementById("email").value += 'Í';
							bufferAgudo = false;
							break;
						case 'o':
							document.getElementById("email").value += 'ó';
							bufferAgudo = false;
							break;
						case 'O':
							document.getElementById("email").value += 'Ó';
							bufferAgudo = false;
							break;
						case 'u':
							document.getElementById("email").value += 'ú';
							bufferAgudo = false;
							break;
						case 'U':
							document.getElementById("email").value += 'Ú';
							bufferAgudo = false;
							break;
						default:
							document.getElementById("email").value += '´';
							document.getElementById("email").value += id;
							bufferAgudo = false;

						}
						return;
					}
				// trata o acento ~
				if(bufferTil){
					switch (id){
						case 'a':
							document.getElementById("email").value += 'ã';
							bufferTil = false;
							break;
						case 'A':
							document.getElementById("email").value += 'Ã';
							bufferTil = false;
							break;
						case 'o':
							document.getElementById("email").value += 'õ';
							bufferTil = false;
							break;
						case 'O':
							document.getElementById("email").value += 'Õ';
							bufferTil = false;
							break;
						default:
							document.getElementById("email").value += '~';
							document.getElementById("email").value += id;
							bufferTil = false;

						}
						return;
					}	

				if(bufferCircunflexo){
					switch (id){
						case 'a':
							document.getElementById("email").value += 'â';
							bufferCircunflexo = false;
							break;
						case 'A':
							document.getElementById("email").value += 'Â';
							bufferCircunflexo = false;
							break;
						case 'e':
							document.getElementById("email").value += 'ê';
							bufferCircunflexo = false;
							break;
						case 'E':
							document.getElementById("email").value += 'Ê';
							bufferCircunflexo = false;
							break;
						case 'i':
							document.getElementById("email").value += 'î';
							bufferCircunflexo = false;
							break;
						case 'I':
							document.getElementById("email").value += 'Î';
							bufferCircunflexo = false;
							break;
						case 'o':
							document.getElementById("email").value += 'ô';
							bufferCircunflexo = false;
							break;
						case 'O':
							document.getElementById("email").value += 'Ô';
							bufferCircunflexo = false;
							break;
						case 'u':
							document.getElementById("email").value += 'û';
							bufferCircunflexo = false;
							break;
						case 'U':
							document.getElementById("email").value += 'Û';
							bufferCircunflexo = false;
							break;
						default:
							document.getElementById("email").value += 'u';
							document.getElementById("email").value += id;
							bufferCircunflexo = false;

						}
						return;
					}

			document.getElementById("email").value += id;
			emailIntocado = false;
		}
	}

// Função que diminui um caracter do texto ativo no momento
   function deletar() {
	if(!emailAtivo )
		{  // deleta um caracter da caixa de texto 'nome'
			document.getElementById("nome").value = document.getElementById("nome").value.substring(0, document.getElementById("nome").value.length-1);
			}
	else{
			 // deleta um caracter da caixa de texto 'email'
			document.getElementById("email").value = document.getElementById("email").value.substring(0, document.getElementById("email").value.length-1);
		}
	}


	//as duas funçõe alteram o botão capslock
	function mudarcaps(id)
	{	
		document.getElementById(id).style.backgroundImage="url(images/tecla-maior-red.png)";
		document.getElementById(id).style.color="#ffffff";
		}
	//
	function invertercaps(id) {
		document.getElementById(id).style.backgroundImage="url(images/tecla-maior.png)";
		document.getElementById(id).style.color="#808080";
		}




	function mudarEspaco(){	
		document.getElementById('espaco').style.backgroundImage="url(images/tecla-maior-ainda-red.png)";
		}

	function inverterEspaco(){
		document.getElementById('espaco').style.backgroundImage="url(images/tecla-maior-ainda.png)";
		}


	// adiciona um espaço ao campo que estiver ativo no momento
	 function adicionaEspaco() {

	if(!emailAtivo )
		{  
		document.getElementById("nome").value +=' ';
			}
	else{
		document.getElementById("email").value += ' ';
		}
	}	


       </script>

Isso é tudo que eu tenho. Salvo com extensão .php

William Bruno · Janeiro 18, 2011

troca:

mysql_query($sql2);

por:

$query = mysql_query($sql2);

Arquivado

[Resolvido] Chamar janela modal via Javascript

Recommended Posts

LadyAra 0

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

LadyAra 0

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

LadyAra 0

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

LadyAra 0

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

LadyAra 0

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

LadyAra 0

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

LadyAra 0

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

LadyAra 0

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

LadyAra 0

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

LadyAra 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501