Jump to content

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By guialacerda
      Alguem me recomenda um plugin para colocar popups no wordpress? Vou usar imagens, tipo vou por uns 4 banners popup aleatórios.
    • By 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!
       
       
       
       
       
    • By 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";
      }
    • By kaionr
      Olá, estou com uma dificuldade para posicionar um elemento. 
      Se trata de um pop-up que aparece na tela ao clicar. Acontece que esse pop-up não fica centralizado em todas as telas dependendo da resolução.
      No momento estou usando o position absolute, a div é essa abaixo: 
      .form-structor { background-color: #222; border-radius: 15px; height: 550px; width: 450px; position: absolute; top: -100px; left: 170px; overflow: hidden; } Também já tentei:
      {position: relative; top: 50%; left: 50%;}
       
       
      Alguém pode me ajudar? 
      Qual propriedade eu utilizo para ficar centralizado tanto horizontal e quanto vertical em qualquer resolução?
    • By AlanB.
      Olá, boa tarde! Eu estou com um problema e não consigo resolver. Alguem pode me ajudar?
      Eu tenho uma seção de serviços no site (inseri a imagem como anexo para que voces possam visualizar)
       
      Basicamente são 5 colunas em que cada uma tem uma imagem, um titulo, um quadradinho que abre uma lista e quando clica em algum item da lista, abre um popup com as informações daquele item. 
       
      Para tentar fazer isso com o php eu criei a tabela "servicos" com os campos:
       
      id
      titulo (pra inserir esses titulos abaixo da imagem) - adequação, estruturação, etc.
      lista - os titulos dos itens da lista
      popup - texto com os itens da lista 
       
      Eu adicionei os itens das listas de cada coluna no phpmyadmin e consegui fazer a função de editar e excluir certinho. Mas depois disso, preciso exibir as informações na index.php 
       
      Até agora tentei fazer somente a primeira coluna de "Adequação", vejam o código na index.php para exibir:
       
      <div class="col mb-4 p-3"> <div class="d-flex justify-content-center"> <img src="img/icones/adequacao.png" alt="Adequação"> </div> <p class="mt-3 titulobranco text-center">Adequação</p> <div class="servicos d-flex justify-content-center"> <ul class="nav"> <li class="nav-item dropdown"> <img class="quadrado nav-link" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" src="img/icones/quadrado.png" alt="Conscientização"> <div class="dropdown-menu dropdown-menu-personalizado" aria-labelledby="navbarDropdown"> <?php $titulo = "Adequação"; $sql = "SELECT * FROM servicos WHERE titulo = '$titulo'"; $sql = $pdo->query($sql); if($sql->rowCount()>0){ foreach($sql->fetchAll() as $servicos){ echo'<a class="dropdown-item textoservicos">'.$servicos['lista'].'<div style="float:right; color:#27B1F7;">&#43;</div></a>'; } } ?> </div> </li> </ul>' </div> </div> Eu não sei se esse código está certo, mas está funcionando. Ele está exibindo na primeira coluna "Adequação", os itens da lista desse respectivo titulo.
       
      Mas o popup não está funcionando, ao clicar em um item da lista deveria abrir o popup com o respectivo texto cadastrado naquele item, mas não está funcionando.
       
      Esse foi o código do popup que eu fiz:
       
      <? $titulo = "Adequação"; $sql = "SELECT * FROM servicos WHERE titulo = '$titulo' "; $sql = $pdo->query($sql); if($sql->rowCount()>0){ foreach($sql->fetchAll() as $servicos){ echo '<div id="modal-servicos" class="modal-container">'; echo '<div class="modaldentro">'; echo '<button class="fecharmodal">X</button>'; echo '<h3>'.$servicos['lista'].'</h3>'; echo '<p>'.$servicos['popup'].'</p>'; echo '</div>'; echo '</div>'; } } ?> Alguem pode me ajudar a corrigir o meu código e fazer funcionar?
       
      Obrigado

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.