Abrir formulário no meu e deixar restante escuro

[miltonbarreto]

Como faço para abrir um formulário ou imagem na frente da página e deixar o restante da página escuro, parece ser javascript.

Veja exemplo no link: O que é que eu faço Sophia? No site do UOL.

veja exemplo do UOL

Obrigado.

[fercosmig]

é 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>');
}

[Cleyton Luiz]

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.