[Pedido] Botão para Vantagens [WEB-SITE]

[João Silva]

Olá meus lindos,

bom eu queria um pequeno código, queria que ao clicar num botao "VANTAGENS", iria abrir uma janela na tela onde estaria escrito as vantagens do produto, em linhas uma por baixo da outra.

Só isso

 

Obrigado desde já.

[Gabriel R.]

Tente isto:

BOTÃO:

 

 

  <a class="btn btn-danger" data-toggle="modal" data-target="#myModal1">Vantagens</a>

 

DESCRIÇÃO:

 

 

<!-- Modal1 -->
<div id="myModal1" class="modal fade" role="dialog">
  <div class="modal-dialog">
 
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Vantagens</h4>
      </div>
       <div class="modal-body" style="text-align: center; line-height: 7px;">
        <p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
      </div>
    </div>

[João Silva]

 

Tente isto:

 

BOTÃO:

  <a class="btn btn-danger" data-toggle="modal" data-target="#myModal1">Vantagens</a>

DESCRIÇÃO:

<!-- Modal1 -->
<div id="myModal1" class="modal fade" role="dialog">
  <div class="modal-dialog">
 
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Vantagens</h4>
      </div>
       <div class="modal-body" style="text-align: center; line-height: 7px;">
        <p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
<p>Coloque aqui os itens/etc.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
      </div>
    </div>

Olá, deu certo, só que ficou assim: http://prntscr.com/ig4sj9 mas eu pretendia que ficasse como este aqui: http://prntscr.com/ig4swy 

Tem como?

Editado Fevereiro 17, 2018 por Jonhn ✔

[Gabriel R.]

Manda o código desse botão que você quer!!! desse vantagens azul.

[Cinco]

Creio que se você colocar a mesma classe em que está usando nesse botão vantagens e comprar, daria certo. No lugar de btn-danger coloque sua classe do CSS.

<a class="btn btn-danger" data-toggle="modal" data-target="#myModal1">Vantagens</a>

Editado Fevereiro 17, 2018 por JoaoMarcos

[Gabriel R.]

Faz o que o coleguinha falou ai em cima! ele é mais avancado .-.

Mais realmente é preciso ver qual classe esta usando e gostaria de ter lá no botão.

[Luiiiz]

Aqui está um modal feito com jquery: https://codepen.io/Luiiiiz/pen/GyoGmm

Só encaixar em seu site e editar depois

[João Silva]

Manda o código desse botão que você quer!!! desse vantagens azul.

 

<!-- BOTÃO DE VANTAGENS --><a href="#"><button class="button"><i class="fas fa-eye"></i> Vantagens</button></a>

[Cinco]

<!-- BOTÃO DE VANTAGENS --><a href="#"><button class="button"><i class="fas fa-eye"></i> Vantagens</button></a>

Coloque o código do botão dessa maneira:

<a class="btn button" data-toggle="modal" data-target="#myModal1">Vantagens</a>

Caso não fique do jeito que gostou, remova a classe btn.

[João Silva]

Coloque o código do botão dessa maneira:

<a class="btn button" data-toggle="modal" data-target="#myModal1">Vantagens</a>

Caso não fique do jeito que gostou, remova a classe btn.

Como ficou » http://prntscr.com/ig5byi

 

Pretendido » http://prntscr.com/ig5bs7

[Cinco]

Testei aqui e funcionou normalmente. Tente colocar o código CSS da classe button na página .php.

 

Exemplo:

 

 

Resultado:

 

Editado Fevereiro 17, 2018 por JoaoMarcos

[João Silva]

Testei aqui e funcionou normalmente. Tente colocar o código CSS da classe button na página .php.

 

Exemplo:

 

 

Resultado:

 

Tenho isso » http://prntscr.com/ig5iny

[Cinco]

Tenho isso » http://prntscr.com/ig5iny

Dentro da tag style adicione o código CSS da classe button.

 

Ex: 

<style type="text/css">
   .button {
     background-color: #f1f1f1;
     border-bottom: 3px solid #ccc;
     color: #fff;
   }
</style>

[João Silva]

 

Dentro da tag style adicione o código CSS da classe button.

 

Ex: 

<style type="text/css">
   .button {
     background-color: #f1f1f1;
     border-bottom: 3px solid #ccc;
     color: #fff;
   }
</style>

http://prntscr.com/ig5myk

[Cinco]

Acho que você não está entendendo... 

Não é para copiar o código, modifique ele conforme o seu site.

 

Código HTML do botão: 

<a class="btn button" data-toggle="modal" data-target="#myModal1">Vantagens</a>

Código CSS do botão: 

  	.button {
  		background-color: #f1f1f1; /* cor que quiser */
  		border-bottom: 4px solid #ccc; /* cor que quiser */
                color: #fff; /* cor da fonte */
                font-weight: 600; /* fica a seu critério */
  	}

[SnowRunescape]

... esse codigo abaixo fica com do jeito que você quer?

<!-- BOTÃO DE VANTAGENS --><a href="#"><button class="button"><i class="fas fa-eye"></i> Vantagens</button></a>

so acresentar o ( data-toggle="modal" data-target="#myModal1" ) nele...

<!-- BOTÃO DE VANTAGENS --><a href="#"><button class="button" data-toggle="modal" data-target="#myModal1"><i class="fas fa-eye"></i> Vantagens</button></a>

se desse jeito não der certo, coloca no <a>.. ficara assim

<!-- BOTÃO DE VANTAGENS --><a href="#" data-toggle="modal" data-target="#myModal1"><button class="button"><i class="fas fa-eye"></i> Vantagens</button></a>

Resolvido?

[João Silva]

... esse codigo abaixo fica com do jeito que você quer?

<!-- BOTÃO DE VANTAGENS --><a href="#"><button class="button"><i class="fas fa-eye"></i> Vantagens</button></a>

so acresentar o ( data-toggle="modal" data-target="#myModal1" ) nele...

<!-- BOTÃO DE VANTAGENS --><a href="#"><button class="button" data-toggle="modal" data-target="#myModal1"><i class="fas fa-eye"></i> Vantagens</button></a>

se desse jeito não der certo, coloca no <a>.. ficara assim

<!-- BOTÃO DE VANTAGENS --><a href="#" data-toggle="modal" data-target="#myModal1"><button class="button"><i class="fas fa-eye"></i> Vantagens</button></a>

Resolvido?

RESOLVIDO

 

Você caiu do céu, explicou tudo direito  e eu entendi tudo, Muito Obrigado, ficou perfeito, Vlw.

 

Obrigado também aos restantes.

[Gabriel R.]

de nada '-'

nem ajudei '-'

[João Silva]

de nada '-'

 

nem ajudei '-'

Mas tentou

[gmoehra]

 

Pedido entregue!

Muito obrigado por ter sugerido sua ideia

Seu pedido foi marcado como [Entregue] e movido à área de pedidos entregues.

(Esta mensagem é automática)