5

Como é que eu posso abrir uma janela modal com window.open() no chrome, IE, opera, etc?

É possível fazer isso?

2
  • 3
    possível duplicata de Janela modal no chrome
    – gustavox
    29/07/2015 às 2:41
  • Me diga, modal pra você é uma janela que bloqueia a janela que chama? Ou modal pra você é uma janela sem a barra de endereços? Ou seriam ambas? 29/07/2015 às 22:36

3 Respostas 3

8

Não window.open não pode funcionar semelhante as janelas modais, se o que você quer dizer com modal é a nova janela bloquear a janela que chamou este modal ou ocultar a barra de endereços.

Antigamente existia a função window.showModalDialog (ainda existe em alguns navegadores, mas está em desuso), exemplo:

function modal()
{
    if (window.showModalDialog) {
      window.showModalDialog('http://pt.stackoverflow.com',
        [1, 4], "dialogwidth: 450; dialogheight: 300; resizable: yes");
    } else {
       alert("Seu navegador não suporta mais este método");
    }
}
<button onclick="modal()">Testar</button>

Recentemente alguns navegadores com tecnologia webkit e blink, como o Chrome 37+, Safari 6+ and Opera 24+ adicionaram suporte ao método .showModal();, este método só funciona com a tag <dialog>, exemplo:

function exemplo() { 
    document.getElementById("test").showModal(); 
}
<dialog id="test">Olá mundo!</dialog>
<button onclick="exemplo()">Teste</button>

No entanto não existe "modal de verdade" que funcione em todos browsers, mas você pode utilizar jQuery ou Bootstrap pra simular a janela Modal (html+css+js), por exemplo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Exemplo
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

6
  • 2
    +1 E toca agora eu favoritar essa pergunta! :-) Depois da edição do @JorgeB e desta resposta, inclusive, retirei meu -1.
    – gustavox
    29/07/2015 às 23:44
  • O Firefox e o ie não suportam o showModal()? Não se esqueçam que a maioria dos utilizadores ainda usa ie e agora o edge.
    – Jorge B.
    31/07/2015 às 8:45
  • 1
    @JorgeB. Isto eu citei, só funciona no Webkit/Blink e por tal motivo falei sobre o uso do bootstrap, pois até aonde sei não existe uma alternativa cross-browser pra resolução. 31/07/2015 às 16:53
  • 1
    @GuilhermeNascimento, tem um polyfill que faz funcionar pelo menos no Firefox: github.com/GoogleChrome/dialog-polyfill 21/03/2019 às 15:09
  • @JeffersonQuesado é legal, mas um pouco "exagerado", quero dizer, ele é bem mais que um pollyfill, ele tem mais coisas, o que na verdade torna o proposito todo um pouco além, claro que a parte de customizar é legal (o diferencial), mas olhando com calma pode se notar que ele substitui o dialog nativo e o .esm.js seria de fato o polyfill, mas o que "falharia" (entre aspas) na parte de "customização" dos navegadores com suporte nativo, quero dizer a ideia toda é legal, mas creio que possamos encontrar algo mais simples. Obrigado, em breve edito a resposta e adiciono o link de qualquer forma. 22/03/2019 às 21:57
4

O comando window.open() abre uma nova janela do navegador e te oferece algumas propriedades, como por exemplo:

window.open("http://www.w3schools.com", "_blank", "height=100, width=100, top=100, left=100");

Fazer com que esta janela haja como uma modal é questão de trabalhar com as specs que o comando te oferece e por exemplo remover a barra de status, remover a opção de resize e barras de rolagem, etc.

Todas as opções possíveis estão no link acima.

3
  • Eu já havia visto o w3 e não consegui fazer o window.open() abrir de forma Modal.
    – pnet
    29/07/2015 às 9:01
  • 1
    Mostre o seu código para eu saber o que você já fez.
    – user3603
    29/07/2015 às 14:46
  • Não tem código. O window.open() simplesmente não abre modal. Só quero saber se há como.
    – pnet
    29/07/2015 às 17:23
3

Na verdade, não é possível fazer um modal com o window.open(), pois ele é uma função que abre outra página, nos caso você teria que utilizar o window.alert("Olá mundo!") para alertar o usuario, window.confirm("Deseja sair?") para perguntar o usuário e assim por diante, recomendo que utilize essa biblioteca em javascript e jquery: http://bootboxjs.com/

Muito fácil de ser utilizada e implementada no seu site.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .