Publicado em 28 de abr.

Banner flutuante

Boa tarde pessoal,

Eu gostaria de fazer um banner que aparece na frente de várias páginas, mas não sei o nome para encontrar como faz. Se alguém souber o nome ou como é feito.

O exemplo do banner é esse de cadastro que abre na hora que você abre esse site: https://englishlive.ef.com/pt-br/

Está em anexo a imagem para vocês verem.

Desde já agradeço

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

marsolim· 28 de abr.

isso pode ser feito dentro de uma div de altura e largura 100% e inicialmente com display:none pra ela ficar oculta e bota o display:block ou display:inline-block quando precisar dela. e pra ficar semitransparente basta usar background-color:rgba(0,0,0,0.7) por exemplo

marsolim· 28 de abr.

o problema do popup é que eles costumam ser bloqueados e muitas vezes acaba dependendo do usuário permitir e em alguns casos eles nem vê o navegador informar que o site tá tentando abrir um pop up pra ir lá permitir e acaba achando que a coisa não tá funcionando.

juliosena· 28 de abr.

Concordo com o marsolim.

Acho que a ideia dele dará certo, vou tentar aqui.

Obrigado a todos.

marsolim· 28 de abr.

essa página de exemplo passada no link mesmo usa uma div e to até dando uma olhada no código fonte da página aqui e pesquisando os termos que aparecem dentro dela achei o nome da classe da div e depois pesquisando os css incorporados na página achei o que tem a classe dela lá onde a mesma tem o atributo display:none como falei hehehe se tu der uma estudada no código fonte e abrir os csss incorporados talvez ajude a entender. esse é o link do arquivo css que tá a classe dessa div e o nome da classe é lgtbx-text procura ela lá com um Alt+F que vai achar os atributos dela.

marsolim· 28 de abr.

isso pode ser feito com session tipo

if(!isset($_SESSION['primeira_vez'])){
    // mostra a janelinha da div aqui
    $_SESSION['primeira_vez'] = '';
}

	 

	o script está dizendo que se a session primeira_vez ainda não existir, mostra a janelinha e cria a session. na próxima abertura a session já vai existir e aí não exibe mais. nesse caso **display** deve ser **block** ou **inline-block** ou talvez nem precisa dele só não deve ser **none**

juliosena· 4 de mai.

Só para concluir a pergunta, fiz aqui e deu certinho, fiz igual o Marsolim recomendou:

HTML:

<!DOCTYPE html>

<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Menu Lateral com CSS</title>
	<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="_css/style.css">
	<script src="_js/CodigoMenu.js"></script>
</head>
<body>

<input type="checkbox" id="check">
<label id="botaoAbrir" for="check"></label>

</body>
</html>

	CSS:

body {

	margin: 0px;
	padding: 0px;
}

#check{
	display: none;
}

#check:checked ~ #botaoAbrir {

	-webkit-transform: translate(0px, -2080px);
 -moz-transform: translate(0px, -2080px);
 -ms-transform: translate(0px, -2080px);
 -o-transform: translate(0px, -2080px);
 transform: translate(0px, -2080px);
}

#botaoAbrir{

	background-repeat: no-repeat;
	background-position: 50%;
	background-size: contain;
	background-image: url("../_imagens/4fiboTalks.jpg");
	curso: pointer;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.8);
	-webkit-transition: 1.0s;
 -moz-transition: 1.0s;
 -ms-transition: 1.0s;
 -o-transition: 1.0s;
 transition: 1.0s;
}

#botaoAbrir:HOVER{

	background-color: rgba(0, 0, 0, 0.9);
}