Pular para o conteúdo principal

Flyer Flutuante Fixo + DIV página inteira

Em um recado, numa propaganda qualquer ou ainda pra chamar a atenção sobre algo, é interessante aparecer um flyer/banner flutuante em seu site.

Aqui uma forma relativamente simples de fazer isso.

NOTA: Apesar de ainda ser um flyer flutuante, neste exemplo ele fica fixo ao rolar a página, mas fica bem bacana com um código leve.

Segue os detalhes do código HTML + Javascript

<body id="id_body">

<!-- Escurecendo toda a página com DIV na sequência do Body-->
<div class="col-lg-12 align-self-center text-center p-4" id="dvBase" style="position:absolute;z-index:9999999999999999;background-color: rgba(0, 0, 0, 0.6); width:100%;top:0px;left:0px;">

<!-- Conteúdo do DIV, ou seja, o Flyer-->
<img src="images/imagem.jpg" class="img-fluid" style="border-radius:10px;border:2px #000000 solid;cursor: pointer;box-shadow: 0px 0px 40px #000000;" onclick="ocultar();" >
</div>

Scripts devem estar no final do arquivo.

<!-- Função para ocultar DIV ao clicar na imagem-->
<script type="text/javascript">
    function ocultar() {
        document.getElementById("dvBase").style.display = "none";
    }
</script>

<!-- Script para obter o tamanho Height total da página e aplicar ao DIV -->
<script type="text/javascript">
vertical = document.documentElement.scrollHeight;
document.getElementById("dvBase").style.height = vertical + "px";
</script>

É isso
Marcadores:

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Windows 10 pedindo credenciais para acessar rede local

Em uma rede com acesso estabelecido entre computadores rodando Windows 7 e Windows 10, um novo micro foi inserido e ocorreu este pequeno problema, ao acessar um micro da rede a partir deste novo Windows 10, havia o pedido de credenciais. O que estava diferente neste Windows 10 para outros da rede é que este não entrava com uma conta local, mas sim com uma conta Microsoft. Como os demais micros de rede não contavam com senha e sabemos que as credenciais para contas locais necessitam de senha para funcionar é aqui que está a solução. Neste caso, onde há pedido de credenciais a partir de um micro que faz login com uma conta Microsoft ao invés de uma conta local, o sistema de credenciais aceita a entrada sem senha , apenas com o nome do usuário. Portanto, ao se deparar com este detalhe, entre com o nome do usuário do micro, deixe a senha em branco e marque para salvar as informações.
Postar um comentário
Leia mais

Habilitar o usuário Administrador e acessar C$ via rede.

Em algumas versões do Windows é possível, por meio do Gerenciador do Computador, ativar e desativar contas de usuários incluindo a conta Administrador, porém em algumas versões isso somente é possível por meio de linha de comando. Com o usuário Administrador ativo, além de outras coisas, pode-se acessar todas as pastas do micro via rede por meio do compartilhamento padrão C$, mas o Administrador deverá obrigatoriamente estar configurado com uma senha. Este acesso pode ser feito com o seguinte caminho: \\nomedocomputador\c$\ Para ativar o usuário Administrador abra o prompt de comando como administrador do sistema clicando sobre o ícone com o botão de direito do mouse e escolhendo “Executar como Administrador”. (Iniciar » Todos os Programas » Acessórios » Prompt de comando). Digite a linha de comando: net user administrador /active:yes No menu Inciar » Executar, digite o comando “ control userpasswords2 ” (sem as aspas) para abrir o gerenciador de contas de usuário...
3 comentários
Leia mais

Tela do Notebook piscando na bateria

Em notebooks mais novos tem ocorrido o erro da tela piscando quando o equipamento está trabalhando somente na bateria após a troca do sistema operacional de Linux para Windows ou de Windows 10 para versões menores do Windows. O problema é resolvido alterando a frequência de atualização da tela de 60Hz, padrão, para 40Hz. Siga os passos: 1. Clique com o botão direito do mouse em qualquer área vazia do Desktop ou Área de Trabalho; 2. Clique em Resolução de Tela; 3. Escolha "Opções Avançadas"; 4. Na aba Monitor altere a "Freqüência de atualização da tela" para 40Hz, aplique e Ok. NOTA (2020): Não testei, mas para aqueles que estão passando por problema, procurem, nos drivers do fabricante do equipamento, o DRIVER-CHIPSET. Ter este do Driver oriundo do fabricante é mais interessante que ter o do Windows. Façam o teste.
51 comentários
Leia mais