Jump to content

Search the Community

Showing results for tags 'floating'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 2 results

  1. 4Unknow

    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; } .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.
  2. Boa tarde caros amigos, como estão? Estou bem, apenas com um probleminha em uma página minha. E sou iniciante em tudo. Vou compartilhar da formar mais clara aqui para vocês entenderem. Atualmente meu site tem apenas um botão flutuante na página como mostrar as setas na imagem abaixo: Só que estou tentando adicionar outro botão conforme mostrarei em imagem abaixo também. O efeito do outro botão em cor laranja, é quando passar o mouse ele abre umas informações. Ele só funciona se eu remover o css principal do site, acredito que teja algo em conflito com ele. Vou postar o site em anexo, realmente precisaria de uma ajuda. Ficaria grato quem conseguisse me desvendar esse problema. A imagem do segundo botão é como está aqui abaixo: Em anexo deixarei o código do meu site. https://www.mediafire.com/file/k66gp06p460ff3c/Tema_site.zip/file
×

Important Information

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