Como Criar uma Tela Líquida ?

[DPLF 3]

Olá gente;

 

Gostaria de saber como criar uma tela líquida de entrada em um Site com a opção do usuário escolher dentro de um check-box sim ou não. Razão do post. Estou criando um Site desaconselhável para menores de 18 anos e, preciso da mesma para que quem acesse saiba dessa informação!

 

Alguém poderia me ajudar com esse script?

 

Grato desde já a todos;

 

DPLF

[Thiago Souza Farias 0]

DPLF, não sei se entendi o que quis dizer com Tela Liquida, seria melhor se explicasse o que seria essa tela, mas ai vai uma dica.

 

Pode fazer isso utilizando simples html/css, considere que seu dominio é DPLF.com.br.

 

Cria uma página e hospede como pagina inicial (em algumas hospedagem exigem que sua pagina inicial seja renomeada como index.

 

Nesta página crie um layout que te agrade e adicione dois links, um de 'Tenho +18' e outro 'Não tenho +18'. O primeiro que leve a página DPLF.com.br/inicio (exemplo) e o segundo para uma ágina aleatória google.com.br (exemplo).

 

Caso não tenha esclarecido a dúvida, manda uma explicação melhor pra gente tentar algo mais apropriado.

[DPLF 3]

Olá novamente;

 

Bem, o que eu quero é uma sobreposição de tela (meio acinzentada) mas transparente sobre o index.html.

 

Vou tentar escrever seguindo uma lógica.

 

Digita a URL

Aparecem index.html e sobre ela uma tela acinzentada (com uma advertência) Site desaconselhável para menores de 18 ano e, aí irá aparecer então nessa mesma mensagem uma opção de escolha Você tem mais de 18 anos? ( ) sim ( ) não o usuário clica em sim e a tela desaparece. Só que o que eu não sei é fazer a tal da sobretela!

 

Não sei se me expliquei bem, mas posso inclusive verificar algum site assim para exemplificar melhor. Acho que o Site do Bradesco lá dentro da Conta vez por outra aparece uma tela assim!

 

Grato por tudo

 

DPLF

[André do Vale 76]

Você pode utilizar uma mangueira na entrada VGA do monitor. Não testei, mas deve dar certo.

 

Volte pro 9gag, ok?

 

@Tópico

 

DPFL, tem gente que chama isto de "overlay". Mas é basicamente uma camada (DIV) absoluta, em relação ao body, com 100% de largura e de altura, e com um fundo em PNG transparente, ou cor opaca e um certo nível de opacidade. :thumbsup:

[Thiago Souza Farias 0]

André consegue fazer um modelo pra gente dar uma olhada, o seu método parece mais simples do que usando JQuery?

 

DPFL dei uma verificada parece que com um JQuery relativamente simples você consegue esse efeito. Dê uma olhada nessa página, clicando no link APRI L'OVERLAY ele abre uma espécie de pop-up com o overlay. É isso que você precisa?

 

Caso seja isso, de uma olhada nesse tutorial (http://www.targetweb.it/overlay-dinamico-in-jquery/)

 

Infelizmente, não vou poder me ater a traduções agora, porque estou no trabalho, mas assim que puder (ou se alguém se dispor a isso) coloco uma explicação melhor.

[DPLF 3]

Olá Thiago Souza Farias e pessoal;

Sim, você me passou o link coreto... era esse efeito o qual eu desejo mesmo, abrir uma página sobreposta em uma página normal... Vou explicar, porque não tem criança aqui. Estou fazendo um Site para uma Sex Shoop, eu como o desenvolvedor, me achei na obrigação de fazer isso. Não por falsa moral, mas para que (como se não fizessem) não deixassem batido a presença de um aviso ao menos sobre a página.

Eu o traduzi an passand e, notei que ele pede o JQuery ferramenta que ainda não consegui instalar em meu PC, não sei se sou burro demais ou existe algo que eu ainda não descobri.

Vou ver o que consigo fazer com JS mesmo. talvez eu consiga algo que ainda não pensei.

Shung, é uma pena que meu monitor seja ainda dos antigos, se fosse de cristal líquido eu tentaria...

Valeu aí gente...

Qualquer outra dica que vier, pra mim é lucro.

Abraços à todos;

DPLF

 

 

DPFL, tem gente que chama isto de "overlay". Mas é basicamente uma camada (DIV) absoluta, em relação ao body, com 100% de largura e de altura, e com um fundo em PNG transparente, ou cor opaca e um certo nível de opacidade. :thumbsup:

 

Olá Andre... Você me ajudou muito também, agora vou quebrar a cabeça aqui para fazer um png legal e nomear uma div para puxar o mesmo. Acho que o problema será quanto for fechar a tela opaca... Mas esse é um problema que se resolve facilmente com html/css

[André do Vale 76]

Cara, com JS puro, fiz algo bem simples (levando em conta que realmente não me sinto a vontade com JS):

 

<!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" />
<title>Teste</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
border: none;
}
#overlay {
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: .4;
top: 0;
left: 0;
z-index: 9998;
}
#overlayBox {
position: absolute;
width: 400px;
height: 400px;
box-shadow: 0 0 10px #000;
background: #fff;
left: 50%;
top: 50%;
margin: -200px 0 0 -200px;
z-index: 9999;
}
#overlay, #overlayBox {
display: none;
}
</style>

<script type="text/javascript">
function overlay(){
var o = document.getElementById('overlay'),
oB = document.getElementById('overlayBox');
o.style.display = (o.style.display == 'block') ? 'none' : 'block';
oB.style.display = (oB.style.display == 'block') ? 'none' : 'block';
}
</script>
</head>

<body>
<input type="button" value="Overlay !" onclick="overlay()" />
<div id="overlay"></div>
<div id="overlayBox"> Lorem ipsum dolor, <a href="javascript:overlay()">fechar overlay</a> </div>
</body>
</html>

 

Como fiz com fundo opaco, por isso separei as divs. Mas você usando PNG, pode colocar o bloco branco dentro do overlay, e diminuir o JS. :thumbsup:

[Thiago Souza Farias 0]

Valeu André. Será de grande ajuda em eventuais projetos.

 

DPLF boa sorte com o projeto, nos mantém atualizado quanto ao andamento do site.

[DPLF 3]

Olá pessoal;

 

Esse projeto foi interrompido por parte do cliente devido a uma viajem que o mesmo teve de fazer. Achei interessante já ir me preparando de agora para essa tela ou <div></div> por um motivo; sei que irá precisar mais cedo ou mais tarde, então já me adiantei.

 

A propósito André, você em muito me adiantou com script que me passara, porém estou com um problema com ele... Aparece um botão na tela o qual ele é acionado e, só então aparece a opacidade da div ... outra coisa a qual gostaria de postar é sobre a figura png a qual não sei onde inserir no javascript ... mas esse eu deveria postr lá no JS, pois caso eu a postasse aqui estaríamos dividindo o tópico e isso não é legal.

 

Mas irei anotando tudo aqui para melhor caminhar junto a esse projeto, interrompido por apenas alguns dias...

 

Grato por tudo;

 

DPLF

[André do Vale 76]

O PNG você insere pelo CSS. Com isso você dá um polimento no código todo (CSS, HTMLS e JS), já que não precisará de um elemento "fora do outro" como fiz no exemplo. :thumbsup:

[DPLF 3]

Beleza André...

 

Vou testar aqui e, depois falo sobre o mesmo!

 

Abraços

 

DPLF