Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Superwagtel

Formulário de Captura

Recommended Posts

Olá pessoal, como faço para criar um formulário que aparece "Sobreposto" na página quando a pessoa entra no site!

 

Exemplo em site: https://www.agenciakaizen.com.br/

 

Gostaria de fazer um formulário de captura  mas que a pessoa possa fecha-lo se não quiser preenche-lo.

 

Alguém sabe de um tópico que ensine a fazer isto?

 

Agradeço à quem puder me ajudar, mesmo indicando o nome deste tipo de processo , exemplo "Janela pop-up"

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Para facilitar a compreensão de minha dúvida, vou explicar melhor:

 

Quando você está nas páginas do Facebook e clica em qualquer foto de usuário:

 

Abre-se uma página com fundo transparente

E no meio a foto clicada e ampliada.

 

Minha dificuldade não é a janela dinâmica em si (programação PHP), mas a forma de se criar está página transparente com o objeto ao centro (pré-definido).

 

Grato à quem puder me ajudar!

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Encontrei a resposta para minha dúvida, na verdade, no Bootstrap ela é denominada Janela Modal e no HTML 5 + CSS3 + JS ela é denominada Janela Popup Fixa

 

Dentro do HEAD coloca-se o CSS e o JS:

 

<style>
.popup1{
position:fixed;
top:0;
bottom::0;
left:0; 
right:0;
margin:auto;
width:300px;
height:180px;
padding:15px;
border:solid 2px #333333;
background:#99FF00;
display:none;
}
</style>


 

<script type="text/javascript">  
  function abrir(){  document.getElementById('popup1').style.display = 'block';  
                  }    
  function fechar(){  
    document.getElementById('popup1').style.display = 'none';  
  				  } 
</script>

 

Depois na tag BODY um chamado para abrir


 

<body onload="abrir()">

Quanto às ações do JavaScript são dentro do BODY

 

<!-- Ações do Popup1 -->               

<a href="javascript: abrir();">Abrir PopUp</a><br />        
<a href="javascript: fechar();">Fechar PopUp</a><br />               

<br /><br />                 

<a href="#" onmouseover="abrir();">Passar o Mouse pra Abrir</a><br />        
<a href="#" onmouseover="fechar();">Passar o Mouse pra Fechar</a>               

<!-- Janela do Popup1 -->

 

Para finalizar o HTML5 (Também no BODY)

 

<div id="popup1" class="popup1">        
  <p>Modelo simples com várias opções de botão</p>        
</div>

 

Resolvi postar aqui para quem precisar de uma Janela Poup Fixa, depois é só ajustar os HTML 5 + CSS3 + JS conforme a sua necessidade!

 

Abraço à todos

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por babylon
      Ola amigos,
       
      Estava querendo criar algo para meu site, um botao igual do site abaixo para calcular formas de pagamento "ver formas de pagamento":
       
      https://www.chipart.com.br/pc-gamer-level-one-black-amd-3400g
       
      Segue imagem em anexo.
       
      Alguem poderia me ajudar se tem algum script algo pronto ou que ajude para abrir pop up modal?
       
      Obrigado a todos.
       
       

    • Por guialacerda
      Alguem me recomenda um plugin para colocar popups no wordpress? Vou usar imagens, tipo vou por uns 4 banners popup aleatórios.
    • Por 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!
       
       
       
       
       
    • Por 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";
      }
    • Por 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?
×

Informação importante

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