Como é que eu posso abrir uma janela modal com window.open()
no chrome, IE, opera, etc?
É possível fazer isso?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeComo é que eu posso abrir uma janela modal com window.open()
no chrome, IE, opera, etc?
É possível fazer isso?
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">×</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>
showModal()
? Não se esqueçam que a maioria dos utilizadores ainda usa ie e agora o edge.
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.
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.