Ir para conteúdo
Fórum Script Brasil
  • 0

Abrir formulário no meu e deixar restante escuro


miltonbarreto

Pergunta

2 respostass a esta questão

Posts Recomendados

  • 0

é uma div que pega a tela toda com o fundo transparente com uma outra div dentro contendo o formulário.

da uma olhada no fonte:

<div id="sophia" class="bloco">
<div class="conteudo borda">
<h3><a href="java script:ShowEnviaPergunta()"><img src="http://ec.i.uol.com.br/header-sophia.gif" alt="O que é que eu faço, Sophia?" title="O que é que eu faço, Sophia?"/><cite>Sophia responde a dúvidas dos internautas</cite></a></h3>

<ul>
<li><a href="http://click.uol.com.br/?rf=eco-sophia&u=http://economia.uol.com.br/financas/investimentos/2008/03/19/ult5346u47.jhtm"><strong>IR 2008 </strong>Veja como declarar seus investimentos</a></li>
</ul>

<form id="sophia-duvidas">
<p>

<select onchange="location.href=this.value">
<option>MAIS DÚVIDAS SOBRE</option>
<option value="http://click.uol.com.br/?rf=eco-sophia&u=http://economia.uol.com.br/financas/carros">Carros</option>
<option value="http://click.uol.com.br/?rf=eco-sophia&u=http://economia.uol.com.br/financas/condominio">Condomínio</option>
<option value="http://click.uol.com.br/?rf=eco-sophia&u=http://economia.uol.com.br/financas/consumidor">Defesa do consumidor</option>
<option value="http://click.uol.com.br/?rf=eco-sophia&u=http://economia.uol.com.br/financas/dividas">Dívidas</option>

<option value="http://click.uol.com.br/?rf=eco-sophia&u=http://economia.uol.com.br/financas/familia">Família</option>
<option value="http://click.uol.com.br/?rf=eco-sophia&u=http://economia.uol.com.br/financas/financiamentos">Financiamentos</option>
<option value="http://click.uol.com.br/?rf=eco-sophia&u=http://economia.uol.com.br/financas/imoveis">Imóveis</option>
<option value="http://click.uol.com.br/?rf=eco-sophia&u=http://economia.uol.com.br/financas/impostoderenda">Imposto de renda</option>
<option value="http://click.uol.com.br/?rf=eco-sophia&u=http://economia.uol.com.br/financas/investimentos">Investimentos</option>
<option value="http://click.uol.com.br/?rf=eco-sophia&u=http://economia.uol.com.br/financas/previdencia">Previdência</option>

<option value="http://click.uol.com.br/?rf=eco-sophia&u=http://economia.uol.com.br/financas/outrasdespesas">Outras despesas</option>
</select>
</p>
</form>

</div>
</div>[/codebox]

agora o java script:

[codebox]if(typeof(FullOpacity)=="undefined")
document.write("<scr"+"ipt src=\"http://noticias.uol.com.br/fullopacity.js\"></scr"+"ipt>");

function ShowEnviaPergunta(){
if(typeof(FullOpacity)!="undefined")
FullOpacity.show('FullOpacityPopUpPergunta');
else
setTimeout(function(){ShowEnviaPergunta()},1000);
}

function validaPerguntas() {
df1 = document.formperguntas; df2 = document.perguntar;
var seuemail = df1.seuemail.value;
if (df1.seunome.value=="") { alert ("Favor preencher seu nome"); df1.seunome.focus(); }
else if (seuemail=="") { alert ("Favor preencher seu e-mail"); df1.seuemail.focus(); }
else if (!seuemail.match(/\w+@\w+\.\w+/)) { alert ("E-mail inválido"); df1.seuemail.focus(); }
else if (df1.descricao.value=="") { alert ("Favor preencher a descrição"); df1.descricao.focus(); }
else {
df2.seunome.value=df1.seunome.value;
df2.seuemail.value=df1.seuemail.value;
df2.descricao.value=df1.descricao.value;
df2.retornar.value=df1.retornar.value;
var autohide = setTimeout("FullOpacity.hide()", 30000);
document.getElementById('iframePerguntas').style.display='block';
df2.submit();
}
}

function EnviarPergunta() {

document.write('<style>'
+'div#FullOpacityPopUpPergunta {display:none;position:absolute;top:50%;left:50%;z-index:1001;}'
+'div#FullOpacityPopUpPergunta .errosconteudo {background:white; padding:10px}'
+'div#FullOpacityPopUpPergunta .errosconteudo #errostop { width:450px; background:url(http://n.i.uol.com.br/erros/linha.gif) no-repeat bottom; padding-left:3px }'
+'div#FullOpacityPopUpPergunta .errosconteudo #errostop .errosfechar { background:transparent;display:inline; padding:5px 0 5px 263px; _padding:5px 0 5px 268px; margin-bottom:10px; text-align:right}'
+'div#FullOpacityPopUpPergunta .errosconteudo #errostop .errosfechar img { padding:0 0 3px 3px; *padding:0 0 0 3px; _margin-left:3px; *margin-top:3px; border:0}'
+'div#FullOpacityPopUpPergunta .errosconteudo #errostop .errosfechar a {font:bold 10px arial; color:#84774a; text-decoration:none}'
+'div#FullOpacityPopUpPergunta .errosconteudo #errostop .errostit {background:transparent;display:inline; padding:5px 0; margin-bottom:10px; font:bold 13px arial; color:#986631; }'
+'div#FullOpacityPopUpPergunta .errosconteudo #errostop .errostit img {*margin-top:3px; margin-right:3px }'
+'#erros {background: #fff; font: x-small arial, verdana, sans-serif; color:#000; width:460px; height:360px; position:relative}'
+'#erros #errosformulario {margin-top:15px;}'
+'#erros #errosformulario {width:440px;font:13px arial; margin:10px;}'
+'#erros #errosformulario .input {width:230px; margin-bottom:5px; border:1px solid #7e9db9; background:white}'
+'#erros .bot-envia {text-transform:uppercase;background-color:#84774a;border-color:#BDBDBD;border-width:1px;font-family:arial;font-size:10px;width:55px;height:19px;color:white; margin-top:5px;}'
+'#erros .v10nb {font:10px verdana}'
+'#erros .a18bb {font:bold 18px arial}'
+'#iframePerguntas {border:0; position:absolute; top:25px; left:0; width:460px; height:345px; margin:10px; display:none}'
+'</style>'
+'<div id="FullOpacityPopUpPergunta" class="apagarEquipe">'
+' <div class="errosconteudo">'
+' <div id=errostop>'
+' <div class=errostit><img src=http://img.uol.com.br/ico_erro.gif align=absmiddle> '+document.perguntar.enviaroque.value+'</div>'
+' <div class=errosfechar><a href=java script:FullOpacity.hide()>FECHAR <img src=http://n.i.uol.com.br/erros/bt_x.gif align=absmiddle></a></div>'
+' </div>'
+' <div id=erros>'
+' <div id=errosformulario onSubmit="return false">'
+' <div class=v10nb>'+document.perguntar.chmateria.value+'</div><div class=a18bb>'+document.perguntar.titmateria.value+'</div>'
+' <br clear=left>'+document.perguntar.descricao.value+'<br><br>'
+' <form name="formperguntas">'
+' <div style="margin-left:105px; font:bold 10px verdana">'
+' <input type="hidden" class=input name="enviaroque">'
+' Nome:<br><input type="Text" class=input name="seunome"><br />'
+' E-mail:<br><input type="Text" class=input name="seuemail"><br />'
+' '+document.perguntar.suaoque.value+':<br><textarea rows=5 class=input name="descricao"></textarea><br />'
+' </div>'
+' <div style="text-align:center"><input type="reset" class="bot-envia" value="Limpar">&nbsp;&nbsp;&nbsp;<input type="button" class="bot-envia" value="Enviar" onclick="validaPerguntas();"></div>'
+' <input type="hidden" name="retornar" value="'+document.perguntar.retornar.value+'">'
+' </form>'
+' </div>'
+' </div>'
+' <iframe id="iframePerguntas" name="iframePerguntas" border=0 frameborder=0></iframe>'
+' </div>'
+'</div>');
}

Link para o comentário
Compartilhar em outros sites

  • 0

Olá Fernando, será que tem como você explicar esse código pois sou meio leigo no assunto e estou tendo alguns probleminhas para fazer.

Será q pode me ajudar.

Obrigado

Alguém tem algum Tutorial para auxiliar, nesse exemplo.

Obrigado.

Olá será que alguém tem algum tutorial ou um passo a passo, para ajudar com esse exemplo.

Obrigado.

Cleyton.

será que alguém tem algum tutorial um outro exemplo que mostre como fazer esse tipo de efeito.

Obrigado.

Cleyton.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...