0

Olá a todos da StackOverflow, primeiramente queria pedir desculpas caso esteja perguntando de forma errada, é a primeira vez que uso o SO. E pedir desculpas também pela minha ignorância em HTML e JS. De fato, só sei o básico. Estou com um problema, pesquisei em diversos fóruns e não consegui resolver.

Tenho um site de marketing gostaria de criar um POP UP simples para o mesmo, porém não estou conseguindo de nenhuma forma. O Pop UP seria semelhante como este: https://i.stack.imgur.com/g9MWf.png O mesmo deve aparecer quando a página é carregada no lado direito do final da página e deve ter o botão de fechar, para não incomodar o visitante.

Espero de coração que alguém possa me ajudar, pois isso é muito importante para mim.

Minha eterna gratidão a quem puder ajudar.

0

2 Respostas 2

0

Primeiro vamos ao html.

Crie uma página qualquer, index.html por exemplo

<!DOCTYPE html>
<html lang="pt-br">
   <head>
      <title>PopUp - SO</title>
      <meta charset="UTF-8" />
   </head>
   <body>
      <div class="wrap">
        <div class="box"><span>x</span></div>
      </div>
      <h1>CONTÉUDO DA PÁGINA</h1>
   </body>
</html>

O seu CSS deve ficar da seguinte forma

*{margin:0; padding:0;}

body{
  background:#F1F1F1;
}

.wrap{
  width:100%;
  height: 100%;
  position:fixed;
  background: rgba(0,0,0,0.5);
}

.wrap .box{
  width:400px;
  height:300px;
  background:#FFF;
  position: relative;
  left:calc(50% - 200px);
  padding-left:5px;
  padding-right:5px;
}

.wrap .box span{
  float:right;
  cursor:pointer;
}

Agora onde a mágica acontece.

document.getElementById("close").onclick = function(){
  document.querySelector(".wrap").style.display = "none";
}

Tentei resumir e deixar o mais básico possível, até porque já existem vários tutoriais de como se fazer isso. Boa sorte XD

2
  • Agradeço a todos pelas respostas, já me ajudou muito! Mas acho que não me expressei da forma certa. Digo, eu só quero um Pop UP para redirecionar a pessoa para uma oferta fora do meu site e comprar. E onde coloco a .gif imagem nesse código? 12/11/2016 às 13:35
  • E o endereço da oferta do produto. 12/11/2016 às 13:51
0

Você irá encontrar muita coisa pronta, principalmente com JQuery. Uma opção sem adicional de plugin é usando somente css, algo como:

<div id="popup1" class="overlay">
    <div class="popup">
        <a class="close" href="#popup1">&times;</a>
        <div class="content">
            <img src="/caminho/da/imagem" alt="">
        </div>
    </div>
</div>

Então fazer uso das propriedades visibility, opacity e z-index para exibir sobre os demais componentes.

JSFiddle: https://jsfiddle.net/lbclucascosta/z8yyo2st/

2
  • Gostei de usar apenas css, mas ai o controle sobre o comportamento do html e dos eventos seria limitado. 12/11/2016 às 12:20
  • 1
    @MauroAlexandre no contexto do que foi perguntado, quais são as limitações a que se refere ?
    – MagicHat
    12/11/2016 às 12:22

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .