PopUp Site

**MuSoul** · 01/02/2019, 10:03 PM

Alguem teria o codigo de algum popup para website

**cwF** · 03/02/2019, 03:04 PM

Originally Posted by bruninho

Alguem teria o codigo de algum popup para website

O PopUp é algo simples de fazer, vou te mandar aqui um exemplo:

Código HTML (insira antes do fechamento da tag </body> ou logo após a abertura desta tag):

Código:

<div class="popup">
    <div class="close-button">✖</div>
    <img src="https://pbs.twimg.com/profile_images/541064181668405248/99fVUMJq_400x400.jpeg">
</div>

Código CSS (insira em um arquivo .css já setado ou dentro da tag <head> dentro da tag <style></style>):

Código:

<style type="text/css">
      .popup{
          width: auto;
          height: auto;
          position: absolute;
          z-index: 999999;
          left: 35%;
          top: 15%;
          background-color: transparent;
          border-radius: 10px;
      }
      .close-button{
          text-align: right;
          color: red;
          cursor: pointer;
          font-size: 24px;
      }
  </style>

Código JS (insira em um arquivo js já setado ou dentro da tag <head> dentro da tag <script></script>):

Código:

<script type="text/javascript">
      $(document).ready(function () {
          $('.close-button').click(function(){
              $('.popup').hide('slow');
          });
      });
  </script>

Lembrando que você precisa do jquery para esse código funcionar, para isso basta inserir a tag <script> abaixo, dentro da tag <head>:

Código:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Qualquer dúvida ou problema estaremos ai para ajudar-lo!

@Edit

Ele ficará assim: [Somente membros podem ver os links. ]

Caso queira posiciona-lo de uma forma diferente, basta mexer no top/left do código css.

Tópico: PopUp Site

Thread Tools

Pesquisar Tópico

Display

PopUp Site

Permissões de Postagem

Sobre nós

Nossos anunciantes

Rede Sociais