Ajuda com Lightbox!

[lucas1silva1s 0]

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.

[goodeathx 8]

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.

[lucas1silva1s 0]

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.

[goodeathx 8]

@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...

[lucas1silva1s 0]

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?

[goodeathx 8]

@lucas1silva1s vê a janela de desenvolvedor(F12) e olha se está acontecendo algum erro, posta ele aqui;