Ir para conteúdo
Caio Guilherme

Pop up de descrição do produto

Recommended Posts

Galera me ajuda aqui, tenho pouco experiencia em css e html, tenho uma loja virtual de autopeças que aceita codigo fonte como descrição, estou tentando fazer que na parte de descrição tenha um botão, que abra um pop up de rolagem mostrando as aplicaçoes nos veículos, porém quando clico no botão abre o pop up mas o botão não fica escondido embaixo do pop up.

 

Olhem no site: https://mobisautopecas.commercesuite.com.br/loja/produto.php?loja=585589&IdProd=1368&iniSession=1&5b06d7cb6ecaf

 

Quero centralizar o botão, e colocar outro botão dentro do pop up para fechar, como se fosse o X do windows.

 

Aqui está a descriçao, primeiro tem o Css, dps o Javascript e dps o Html:

 

<doctype html="">
<title></title>
<meta charset="utf-8" />
<style type="text/css">.popup{
                position: absolute;
                top: 0; bottom: 0; 
                left: 0; right:0;
                margin: auto;
                width: auto;
                height: 180px;
                padding: 15px;
                border: solid 1px #4c4d4f;
                background-color: #a9a9a9;
                display: none;
                overflow-y: scroll;
                }
                
            .button{        
background: #660000;
background: -webkit-linear-gradient(#e06666, #660000 50%, #e06666);
background: linear-gradient(#e06666, #660000 50%, #e06666);
border-radius: 5px;
padding: 9px 26px;
color: #ffffff;
display: inline-block;
}

.button-font{
font-family: arial;
font-size: 30px;
font-color: #fffff;
font-weight: bolder;
text-align: center;
text-decoration: none;
}
</style>
<a class="popup" href="javascript: abrir();"> <script type="text/javascript">
            function abrir(){
                document.getElementById('popup').style.display = 'block';
            }
            function fechar(){
                document.getElementById('popup').style.display =  'none';
            }
        </script> </a>
<div class="popup" id="popup">
<p><a class="popup" href="javascript: abrir();">&nbsp;</a></p>

<p style="text-align: center;"><strong>Jogo Parafuso Fixa&ccedil;&atilde;o Cabe&ccedil;ote Hr / K2500 / L200 (18 Pecas - ) - 709310</strong></p>

<p style="text-align: center;"><strong>Aplica&ccedil;&atilde;o</strong></p>

<p style="text-align: center;">Cod: 709310</p>

<p style="text-align: center;">Cod Original: 4041248042397</p>

<p style="text-align: center;">&nbsp;</p>

<p style="text-align: center;"><strong>Hyundai</strong></p>

<p style="text-align: center;">Hr</p>

<p style="text-align: center;">2.5 8V 4d56</p>

<p style="text-align: center;">05/12</p>

<p style="text-align: center;"><strong>Kia Motors</strong></p>

<p style="text-align: center;">Bongo K2500</p>

<p style="text-align: center;">2.5 8V 4d56</p>

<p style="text-align: center;">04/12</p>

<p style="text-align: center;"><strong>Mitsubishi</strong></p>

<p style="text-align: center;">L200 / Pajero</p>

<p style="text-align: center;">2.5 8V</p>

<p style="text-align: center;"><strong>Garantia</strong></p>

<p style="text-align: center;">90 dias</p>

<p style="text-align: center;"><strong>Itens Inclusos</strong></p>

<p style="text-align: center;">1 Parafuso Fixa&ccedil;&atilde;o Cabe&ccedil;ote Hr / K2500 / L200 (18 Pecas) - 709310</p>

<p>&nbsp;</p>
<a class=".button" href="javascript: fechar();">Clique aqui para fechar as aplica&ccedil;&otilde;es</a></div>
<!--ações para o popup -->

<p>&nbsp;</p>

<p><a class="button button-font" href="javascript: abrir()">Ver aplicacoes</a></p>
</doctype>

Compartilhar este post


Link para o post
Compartilhar em outros sites

você pode aumentar a altura da descrição ou diminuir o font-size do botão pra que ele caiba dentro da descrição. Você pode também aumentar a altura(hight) da descrição que aparece quando você clica no botão fazendo o botão ser coberto por essa descrição.

 

 

se você aumentar a descrição do pop-up vai aparecer o botão que você fez normalmente no site. 

 

Seu codigo alterado. mudei o texto de fechamento pro topo. E repliquei o codigo button font, para não alterar o primeiro. não sei se era isso que queria, seu codigo ta meio bagunçado, dava pra eu fazer melhor, mas tomaria muito tempo. Pois sou iniciante também.
 

 

 

 

.button-font1{
float: right;
font-family: arial;
font-size: 20px;
font-color: #fffff;
font-weight: bolder;
text-decoration: none;
border:1px solid red;
}

 

 

 

 

<div class="popup" id="popup">
<p><a class="popup" href="javascript: abrir();">&nbsp;</a></p>

<a class="button button-font1" href="javascript: fechar();"">X</a>

<p style="text-align: center;"><strong>Jogo Parafuso Fixa&ccedil;&atilde;o Cabe&ccedil;ote Hr / K2500 / L200 (18 Pecas - ) - 709310</strong></p>

<p style="text-align: center;"><strong>Aplica&ccedil;&atilde;o</strong></p>

<p style="text-align: center;">Cod: 709310</p>

<p style="text-align: center;">Cod Original: 4041248042397</p>

<p style="text-align: center;">&nbsp;</p>

<p style="text-align: center;"><strong>Hyundai</strong></p>

<p style="text-align: center;">Hr</p>

<p style="text-align: center;">2.5 8V 4d56</p>

<p style="text-align: center;">05/12</p>

<p style="text-align: center;"><strong>Kia Motors</strong></p>

<p style="text-align: center;">Bongo K2500</p>

<p style="text-align: center;">2.5 8V 4d56</p>

<p style="text-align: center;">04/12</p>

<p style="text-align: center;"><strong>Mitsubishi</strong></p>

<p style="text-align: center;">L200 / Pajero</p>

<p style="text-align: center;">2.5 8V</p>

<p style="text-align: center;"><strong>Garantia</strong></p>

<p style="text-align: center;">90 dias</p>

<p style="text-align: center;"><strong>Itens Inclusos</strong></p>

<p style="text-align: center;">1 Parafuso Fixa&ccedil;&atilde;o Cabe&ccedil;ote Hr / K2500 / L200 (18 Pecas) - 709310</p>

</div>
<!--ações para o popup -->

<p>&nbsp;</p>

<p><a class="button button-font" href="javascript: abrir()">Ver aplicacoes</a></p>
</doctype>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Incompetech
      Olá a todos. Então.. eu estava praticando um pouco de HTML / CSS e no fim cheguei a um resultado bem legal e simples claro disto aqui:
       
      Eu sei que alguns vão reconhecer isto.. Mas para quem não conhece é algo relacionado ao game MU ONLINE.
      Enfim. Como podem ver eu inventei alguns adicionais que no caso são as características dessa armadura, porém eu gostaria de aplicar um efeito em que esses adicionais apareçam quando eu passar o mouse por cima da imagem da armadura.. como se fosse dentro do game.
      Abaixo vão alguns exemplos:
      Efeito aplicado em um projeto HTML: 

      O mesmo efeito In Game:
       
      Sei que pode parecer algo meio trivial mas gostaria muito de aprender como eu faço para criar algo igual, se puderem me ajudar eu agradeço de coração.
    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
    • Por VCastilho
      Bom Dia

      Desenvolvi um filtro HTML e estou com dificuldades em criar o JavaScript para o funcionamento do mesmo, poderiam em ajudar a criar esse JS?
      Segue o código:
       
      <div id = "filtro"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style disabled> #filtro { border-style:double; } #button1 { width: 120px; position: inherit; right: 10px; background-color: #e00505; font-size: 12px; FLOAT: right } h4 { font-size: 18px; border-style: inset; } select { border: 1px solid #000; box-sizing: border-box; width: 124px; border-radius: 5px; height: 25px; padding: 3px; } section label { width: calc(100% / 4); color: red; text-align: center; } section { display: flex; flex-wrap: wrap; } h4/ { border-style:double; } @media screen and (max-width:768px) { section label { margin-bottom: 20px; width: 100%; } } </style> <h4 style="text-align: center;">Personalize o seu Kit de Segurança</h4><br><br> <form action="#" id="form"> <section> <label> <b> Tipo do seu Kit </b><br> <select name="speed" id="speed" style=" "> <option desable>Selecione</option> <option>Residencial</option> <option>Comercial</option> </select> </label> <label> <b>Qualidade de Seu Kit</b><br> <select name="files" id="files" style=" "> <option desable> Selecione </option> <option value="HD">HD</option> <option value="Full HD">Full HD</option> <option value="Analógica">Analógica</option> </select> </label> <label> <b> Quantidade de Câmeras </b><br> <select name="number" id="number" style=" "> <option desable> Selecione </option> <option>1 Câmera</option> <option>2 Câmeras</option> <option>3 Câmeras</option> <option>4 Câmeras</option> <option>5 Câmeras</option> <option>6 Câmeras</option> <option>7 Câmeras</option> <option>8 Câmeras</option> <option>9 Câmeras</option> <option>10 Câmeras</option> <option>11 Câmeras</option> <option>12 Câmeras</option> <option>13 Câmeras</option> <option>14 Câmeras</option> <option>15 Câmeras</option> <option>16 Câmeras</option> </select> </label> <label> <b> Selecione a Marca </b><br> <select name="salutation" id="salutation"> <option desable selected>Selecione</option> <option>Intelbras</option> <option>Hikvision</option> <option>Outras</option> </select> </label> </section> <BR> <BR> </form> </div> <br> <br> <button class="kd-filter-button" id="button1">Ver resultados</button> Seria bom, se possível o botão funcionar fora da tag "form" pois para personalizar fica melhor

       
×

Informação importante

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