2

Gostaria de saber como fazer um pop up que abra na mesma janela após o usuário clicar em um botão na página. O conteúdo do pop up ficaria em uma página separada.

1 Resposta 1

2

Use o window.open:

<button onclick="window.open('pagina.html','_blank','width=400, height=300')">Abrir popup</button>

É importante saber que a popup só irá funcionar mediante evento de click por parte do usuário, caso contrário o navegador bloqueará por padrão.

Sintaxe do window.open:

window.open(URL, nome, propriedades, replace)

Informações detalhadas você pode conferir no MDN.

Edit

Abrir uma popup via iframe:

function abrirPopUp(){
   var pagina = "pagina.html";
   var popup = document.querySelector("iframe");
   popup.src = pagina;
   popup.style.display = "block";
}
iframe{
   -webkit-transform: translate(-50%,-50%);
   -moz-transform: translate(-50%,-50%);
   transform: translate(-50%, -50%);
   top: 50%;
   left: 50%;
   position: fixed;
   display: none;
   position: fixed;
   z-index: 99;
   width: 500px;
   height: 300px;
}
<button onclick="abrirPopUp()">Abrir popup</button>
<iframe scrolling="no" frameborder="0"></iframe>

5
  • o window.open abre um nova janela, queria que o popup ficasse na mesma janela em que foi dado o click.
    – user90441
    3/02/2018 às 2:38
  • @Ehren999 Boa noite!! Entendi agora o que vc queria. Quer abrir como se fosse uma modal. Vou reformular a resposta, vc aguarda alguns minutos?
    – Sam
    3/02/2018 às 2:42
  • claro, obrigado!
    – user90441
    3/02/2018 às 2:43
  • @Ehren999 Adicionei na resposta uma opção via iframe.
    – Sam
    3/02/2018 às 3:08
  • muito obrigado!
    – user90441
    4/02/2018 às 19:57

Você deve fazer log-in para responder a esta pergunta.