Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

4Unknow

Recommended Posts

4Unknow    0

4Unknow
Postado

Boa noite caros amigos.
Seguinte, estou com um problema aqui, estou utilizando um popup info que achei bacana, mas estou querendo ativar o botão "entendi" para fechar ele.
Sabem como devo fazer? Seguem meu HTML acompanhado de meu CSS:

HTML: 

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Botão Infomação</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->


<!-- POPUP STARTS FROM HERE -->
<div id="PopUpGeneral" class="popup-module popup-wrap warning show">
  <div class="popup-body bounceInDown" aria-modal="true" role="alertdialog" aria-labelledby="dialog_label" aria-describedby="dialog_desc">
    <div class="popup-icon"></div>
    <div id="dialog_label" class="title">Atenção usuário!</div>
    <div id="dialog_desc" class="text">
      Nosso Robô Everest está passando por uma atualização.
      Utilizar apenas em versões de simulação até maiores informações.
      Agradecemos por sua comprensão.
    </div>
    <div class="btn-wrap noselect">
      <button  id="BtnOK" class="btn btn-ok">ENTENDI</button>
    </div>
  </div>
</div>
<!-- partial -->
  
</body>
</html>

 

CSS:

  

/* ************************* */
/* ***** POPUP MODULE ***** */
/* ************************* */

.popup-module {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    z-index: 5;
    top: 0; left: 0; bottom: 0; right: 0;
    padding: 60px 20px 0 20px;
}
.popup-module.show { display: block; }
.popup-module.hide { display: none; }
.popup-module .popup-body {
    position: relative;
    background: #fff;
    max-width: 400px;
    margin: auto;
    border-radius: 5px 5px 5px 5px;
    z-index: 0;
}
.popup-module .popup-body:after {
    content: '';
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    transform: rotate(-3deg);
    height: 130px;
    width: 100%;
    max-width: 300px;
    top: 0px;
    border-radius: 5px;
    z-index: -2;
    left: -5px;
}
.popup-module p { margin: 0 0 10px 0; }
.popup-module p:last-child { margin: 0; }

.popup-module .title {
    padding: 36px 10px 10px 10px;
    background: #fff;
    border-radius: 5px 5px 0 0;
    font-size: 1.3em;
    color: #4caf50;
    z-index: 0;
    text-align: center;
}
.popup-module .text {
    padding: 0px 40px 10px 40px;
    text-align: center;
    background: #fff;
    z-index: 0;
    line-height: 1.6em;
    color: #666;
}
.popup-module .btn-wrap {
    position: relative;
    display: block;
    text-align: center;
    padding: 0 10px 10px 10px;
    background: #fff;
    z-index: 0;
    border-radius: 0 0 5px 5px;
}

.popup-module .close {
    top: 10px;
    position: absolute;
    right: 10px;
    background: transparent;
    border: 0;
    font-size: 1em;
    color: #ccc;
}

.popup-module .btn {
    position: relative;
    display: inline-block;
    border-radius: 5px;
    margin-bottom: 5px;
    background: #f1f1f1;
    color: #4caf50;
    font-size: 1.2em;
    padding: 10px 20px;
    width: 100%;
    border: 0;
}
.popup-module .btn-ok {background: #4caf50; color: #fff;}
.popup-module .btn:last-child { margin-bottom: 0; }

.popup-module .popup-icon {
    width: 60px;
    height: 60px;
    background: #ccc;
    left: 0;
    right: 0;
    display: block;
    position: absolute;
    margin: 0 auto;
    border-radius: 50%;
    top: -30px;
    border: 4px solid #fff;
}
/* Popup warning settings */
.popup-module.warning .popup-icon { background: #ff27ec; }
.popup-module.warning .popup-icon:before {
    content: '!';
    text-align: center;
    position: absolute;
    left: 20px;
    top: -30px;
    transform: rotate(20deg);
    color: #fff;
    font-size: 5em;
    top: -27px;
}
.popup-module.warning .title { color: #ff27ec; }
.popup-module.warning .btn-ok { background: #ff27ec; }

/* Popup info settings */
.popup-module.info .popup-icon { background: #ffc107; }


/* ANIMATION */
@-webkit-keyframes bounceInDown {
    from,
    60%,
    75%,
    90%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);
    }
  
    60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
    }
  
    75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }
  
    90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInDown {
    from,
    60%,
    75%,
    90%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);
    }
  
    60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
    }
  
    75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }
  
    90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

 

 

Desde já agradeço pelo apoio.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jack Oliveira    1

Jack Oliveira
Postado
1 hora atrás, 4Unknow disse:

Boa noite caros amigos.
Seguinte, estou com um problema aqui, estou utilizando um popup info que achei bacana, mas estou querendo ativar o botão "entendi" para fechar ele.
Sabem como devo fazer? Seguem meu HTML acompanhado de meu CSS:

HTML: 


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Botão Infomação</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->


<!-- POPUP STARTS FROM HERE -->
<div id="PopUpGeneral" class="popup-module popup-wrap warning show">
  <div class="popup-body bounceInDown" aria-modal="true" role="alertdialog" aria-labelledby="dialog_label" aria-describedby="dialog_desc">
    <div class="popup-icon"></div>
    <div id="dialog_label" class="title">Atenção usuário!</div>
    <div id="dialog_desc" class="text">
      Nosso Robô Everest está passando por uma atualização.
      Utilizar apenas em versões de simulação até maiores informações.
      Agradecemos por sua comprensão.
    </div>
    <div class="btn-wrap noselect">
      <button  id="BtnOK" class="btn btn-ok">ENTENDI</button>
    </div>
  </div>
</div>
<!-- partial -->
  
</body>
</html>

 

CSS:

  


/* ************************* */
/* ***** POPUP MODULE ***** */
/* ************************* */

.popup-module {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    z-index: 5;
    top: 0; left: 0; bottom: 0; right: 0;
    padding: 60px 20px 0 20px;
}
.popup-module.show { display: block; }
.popup-module.hide { display: none; }
.popup-module .popup-body {
    position: relative;
    background: #fff;
    max-width: 400px;
    margin: auto;
    border-radius: 5px 5px 5px 5px;
    z-index: 0;
}
.popup-module .popup-body:after {
    content: '';
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    transform: rotate(-3deg);
    height: 130px;
    width: 100%;
    max-width: 300px;
    top: 0px;
    border-radius: 5px;
    z-index: -2;
    left: -5px;
}
.popup-module p { margin: 0 0 10px 0; }
.popup-module p:last-child { margin: 0; }

.popup-module .title {
    padding: 36px 10px 10px 10px;
    background: #fff;
    border-radius: 5px 5px 0 0;
    font-size: 1.3em;
    color: #4caf50;
    z-index: 0;
    text-align: center;
}
.popup-module .text {
    padding: 0px 40px 10px 40px;
    text-align: center;
    background: #fff;
    z-index: 0;
    line-height: 1.6em;
    color: #666;
}
.popup-module .btn-wrap {
    position: relative;
    display: block;
    text-align: center;
    padding: 0 10px 10px 10px;
    background: #fff;
    z-index: 0;
    border-radius: 0 0 5px 5px;
}

.popup-module .close {
    top: 10px;
    position: absolute;
    right: 10px;
    background: transparent;
    border: 0;
    font-size: 1em;
    color: #ccc;
}

.popup-module .btn {
    position: relative;
    display: inline-block;
    border-radius: 5px;
    margin-bottom: 5px;
    background: #f1f1f1;
    color: #4caf50;
    font-size: 1.2em;
    padding: 10px 20px;
    width: 100%;
    border: 0;
}
.popup-module .btn-ok {background: #4caf50; color: #fff;}
.popup-module .btn:last-child { margin-bottom: 0; }

.popup-module .popup-icon {
    width: 60px;
    height: 60px;
    background: #ccc;
    left: 0;
    right: 0;
    display: block;
    position: absolute;
    margin: 0 auto;
    border-radius: 50%;
    top: -30px;
    border: 4px solid #fff;
}
/* Popup warning settings */
.popup-module.warning .popup-icon { background: #ff27ec; }
.popup-module.warning .popup-icon:before {
    content: '!';
    text-align: center;
    position: absolute;
    left: 20px;
    top: -30px;
    transform: rotate(20deg);
    color: #fff;
    font-size: 5em;
    top: -27px;
}
.popup-module.warning .title { color: #ff27ec; }
.popup-module.warning .btn-ok { background: #ff27ec; }

/* Popup info settings */
.popup-module.info .popup-icon { background: #ffc107; }


/* ANIMATION */
@-webkit-keyframes bounceInDown {
    from,
    60%,
    75%,
    90%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);
    }
  
    60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
    }
  
    75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }
  
    90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInDown {
    from,
    60%,
    75%,
    90%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);
    }
  
    60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
    }
  
    75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }
  
    90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

 

 

Desde já agradeço pelo apoio.

Com este código você pode fechar...

  

<a href='#' onclick='window.close()'>Fechar modal</a>

Outro ex: aqui

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • 4Unknow
      Colocar botão flutuante no lado direito.
      Por 4Unknow
      Bom dia galera.

      Estou querendo colocar um botão flutuante em meu site que acompanhe quando rolar para baixo.
      Um botão que vou utilizar para suporte.

      Um exemplo de como gostaria abaixo:


       
      Fico grato.
    • babylon
      Ajuda em web programação [Formas de Pagamento pop up modal]!!!
      Por babylon
      Ola amigos,
       
      Estava querendo criar algo para meu site, um botao igual do site abaixo para calcular formas de pagamento "ver formas de pagamento":
       
      https://www.chipart.com.br/pc-gamer-level-one-black-amd-3400g
       
      Segue imagem em anexo.
       
      Alguem poderia me ajudar se tem algum script algo pronto ou que ajude para abrir pop up modal?
       
      Obrigado a todos.
       
       

    • guialacerda
      Banner em POPUP
      Por guialacerda
      Alguem me recomenda um plugin para colocar popups no wordpress? Vou usar imagens, tipo vou por uns 4 banners popup aleatórios.
    • notax
      Post para PopUp ou Fancybox
      Por notax
      Pessoal, boa tarde.
       
      Seguinte:
      Tenho um form e no mesmo form dois buttons... Esses buttons chamam uma função... Cada um deles dá um submit pra um pagina especifica... Assim:

       
      <script language="JavaScript"> function Gerar() { if (valida_campo()){ document.form.action="file1.php"; document.forms.form.submit(); } } function Calcular() { if (valida_campo()){ document.form.action="file2.php"; document.forms.form.submit(); } } </script>  
      Como eu faço para:
      1) abrir file2.php em um popup?
      2) tenho como abrir file2.php em um fancybox? Considerando que os dados são enviados por POST?

      Valeu!
       
       
       
       
       
    • VictorPHP
      REACTJS - TELA DE UPDATE EM POPUP NÃO RECEBE DADOS CORRETOS
      Por VictorPHP
      Bom dia Galera!

      Fiz uma tela de cadastro na aplicação usando popup. Para cadastro tudo certo, pois não preciso recolher informações.
      Para fazer a tela de update, precisava que quando clicasse no link "Editar" ele buscasse a linha que eu cliquei para editar, porem em todas as tentativas de resolver isso ele pegou somente a primeira linha, fora que colocando o html do popup nessa ordem, ele foi parar la no canto direito.

      Segue o codigo de uma das tentativas :

      // Aqui é onde faço o select com todos ativos da carteira em tabela, e a DIV popup é exibida quando clico no link Editar. Não sei se é o lugar correto mas foi o mais proximo que consegui de fazer funcionar. Porem como ja explicado sempre pega o primeiro valor em vez da linha que cliquei
      {ativo.map(row => (
      <tr>
      <input className="key" value={row._id} />
      <td>{row.ativo}</td>
      <td>{row.quantidade}</td>
      <td>{row.data_entrada}</td>
      <td>{row.valor_entrada}</td>
      <td>{row.data_saida}</td>
      <td>{row.valor_saida}</td>
      <td>R${row.valor_saida - row.valor_entrada}</td>
      <td><a onClick={edit}>Editar</a></td>

      <div className="popupedit">
      <div className="popupedit-content">
      <img src={close} alt="close" onClick={fechar} className="close" width="20px" height="20px"/>
      <center><input type="text" placeholder="Ativo"></input>
      <input type="text" placeholder="Lotes"></input>
      <div className="datacompra">
      <input type="date" placeholder="Data da Compra" className="data"></input>
      <input type="checkbox" className="check"></input><label className="check">Hoje</label>
      </div>
      <input type="text" placeholder="Valor da Compra"></input>
      <div className="datacompra">
      <input type="date" placeholder="Data da Compra" className="data"></input>
      <input type="checkbox" className="check"></input><label className="check">Hoje</label>
      </div>
      <input type="text" placeholder="Valor da Venda"></input> </center>
      <button className="button">Adicionar</button>
      </div>
      </div>
      </tr>


      // função que chama exibi o popup
      function edit(){
      document.querySelector(".popupedit").style.display = "flex";
      }
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito