Ir para conteúdo

Arquivado

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

lucas1silva1s

Ajuda com Lightbox!

Recommended Posts

Olá Pessoal! Eu estou fazendo algo que explicadamente falando, é ridiculamente simples, mas na prática me parece que deve ser bem complicado. Seguinte: eu gerei um formulário no Google Forms, e queria colocar ele no site aqui da empresa, mas eu não queria inserir esse código em um lugar estático do site, o que eu quero basicamente, é que quando alguém abrir o site, tenha uma lightbox que abra depois de uns 5 segundos com essa tag que o Google forms me deu! Sabe? É só isso! Mas estou buscando na web sobre lightboxes, e tem muita complicação nisso que talvez não tenha necessidade para o meu caso! Os códigos que eu achei tem que usar até Java! Precisa mesmo? Ah, vale lembrar que se possível, queria que essa lightbox rodasse em dispositivos mobile também.. tem como?

 

Tag do Formulário gerado:

 

 

"<iframe src="https://docs.google.com/forms/d/1NwTDc6-qnbx2qEPBHcyRGnAa_Z69H2bCnG9bLD1LahI/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Carregando…</iframe>"

 

 

Vou agradecer MUITO a ajuda para essa questão!

 

Lucas Silva.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa tarde @lucas1silva1s, provavelmente a melhor e mais prática solução que você encontrará é com javascript. Tenho um script desenvolvido por mim, com uma chamada simples. Se desejar posso anexa-lo aqui.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá @Web Programmer!

 

Eu realmente quero bastante que me mande esse anexo! Eu continuo tentando por aqui e ainda não tive nenhum sucesso!

 

Obrigado desde já!

 

 

Boa tarde @lucas1silva1s, provavelmente a melhor e mais prática solução que você encontrará é com javascript. Tenho um script desenvolvido por mim, com uma chamada simples. Se desejar posso anexa-lo aqui.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@lucas1silva1s estou em casa, não estava com os arquivos no trabalho. Vou coloca-los aqui, pois no futuro o arquivo upado pode ser deletado.

 

frame.js

      function createFrame(){
        $this = this;
        this.c;
        
        this.checkCompatibility = function(){
          if(document.createElement("IFRAME")){
            $this.c = "Iframe";
          }else{
            $this.c = "Object";
          }
          return $this.c;
        }
        
        this.create = function(file){
          $this.c = $this.checkCompatibility();
          var box;
          if($this.c == "Object"){
            box = document.createElement("OBJECT");
            box.setAttribute("style","width:100%;height:100%;")
            box.setAttribute("src",file);
          }else{
            box = document.createElement("IFRAME");
            box.setAttribute("style","width:100%;height:100%;")
            box.setAttribute("src",file);
          }
          return box;
        }
      }
      
      function janela(){
        $this = this;
        
        this.createWindow = function(){
          // Get body DOM
          var body = document.body;
          // Create box1
          var box1 = document.createElement("div");
          // Set id
          box1.setAttribute("id","extBox")
          // Attributes
          var attributes = "width:100%; height:100%;\
          background: rgba(0,0,0,0.7);position: absolute";
          // Set attribute 
          box1.setAttribute("style",attributes);
          // Create box2
          var box2 = document.createElement("div");
          // Set id
          box2.setAttribute("id","extBox2")
          // Attributes
          var attributes = "width:80%; height:100%;\
          background: white;position: relative;margin:0 auto";
          // Set attribute 
          box2.setAttribute("style",attributes);
          // Put box2 into box1
          box1.appendChild(box2);
          // Put box1 into body
          body.insertBefore(box1,body.getElementsByTagName("div")[0]);
        }
        
        this.loadContent = function(file){
          var frame = new createFrame();
          var b = frame.create(file);
          document.getElementById("extBox2").appendChild(b);
        }
        
        this.closeWindow = function(){
          var pai = parent.document.body.getElementsByTagName("div")[0];
          pai.parentNode.removeChild(pai);
        }
      }
      
      

index.html -> Já com o formulário

<html>
  <head> 
    <title> Teste lightbox </title>
    <script src="frame.js"></script>
    <script>
      window.onload = function(){
        var jan = new janela();
        jan.createWindow();
	jan.loadContent("https://docs.google.com/forms/d/1NwTDc6-qnbx2qEPBHcyRGnAa_Z69H2bCnG9bLD1LahI/viewform?embedded=true");
      }
    </script>
  </head>
  <body>
  </body>
</html>

Se quiser fechar a janela só utilizar:

<input type="button" onclick="window.parent.jan.closeWindow()" value="Fechar"></input>

O Código pode ter algumas redundâncias técnicas quanto a escrita, mas é porque já tem tempo que o escrevi. Veja se resolve teu problema...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá goodeathx

 

O script funcionou no dreamweaver, mas quando passo para o site, só aparece o botão "fechar", e eu já verifiquei os links externos, principalmente o "frame.js" que no caso, eu coloquei o caminho do meu site no "src", mas não aparece nada, será alguma incompatibilidade com o Java?

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
×

Informação importante

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