Botão fechar popup
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. } position: relative. background: #fff. max-width: 400px. margin: auto. border-radius: 5px 5px 5px 5px. z-index: 0. } 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. } 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. } padding: 0px 40px 10px 40px. text-align: center. background: #fff. z-index: 0. line-height: 1.6em. color: #666. } position: relative. display: block. text-align: center. padding: 0 10px 10px 10px. background: #fff. z-index: 0. border-radius: 0 0 5px 5px. } top: 10px. position: absolute. right: 10px. background: transparent. border: 0. font-size: 1em. color: #ccc. } 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. } 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. }@-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). }
} -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.Discussão (2)
Carregando comentários...