• 0
Sign in to follow this  
miltonbarreto

Abrir formulário no meu e deixar restante escuro

Question

2 answers to this question

Recommended Posts

  • 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(/\[email protected]\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>');
}

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this