Um recurso de interface muito �til em programas gr�ficos basados em janelas � o de se recorrer a uma janela secund�ria, “filha” da janela/tela principal, para solicitar ao usu�rio determinadas informa��es complementares � parte. Este tipo de janela � denominada “caixa de di�logo” (dialog).
Existem dois tipos de associa��o entre uma janela de di�logo e a janela principal � qual est� associada: modal, quando a abertura da janela de di�logo bloqueia qualquer intera��o na janela principal, at� que o di�logo seja encerrado; ou n�o modal, em que pode haver intera��o concomitante nas duas janelas, principal e di�logo, ou seja, o di�logo n�o bloqueia a janela principal. O caso mais comum � do di�logo modal.
Apesar de ser um recurso muito comum, uma janela de di�logo modal ainda � um recurso n�o padronizado e complicado no ambiente web. Este artigo procura apresentar as alternativas e possibilidades atualmente existentes.
window
oferece um m�todo propriet�rio (n�o-padr�o)
showModalDialog
para abrir janela modal, de acordo com as
caracter�sticas especificadas (par�metros, comportamento). O m�todo devolve o(s)
valor(es) de retorno da p�gina chamada e bloqueia o prosseguimento do c�digo at�
o retorno/fechamento da janela.
Na janela aberta, n�o h� a propriedade opener
, como no m�todo padr�o DOM
open()
, mas voc� pode passar essa informa��o no segundo par�metro,
para a propriedade n�o-padr�o dialogArguments
da janela aberta.
Este m�todo foi introduzido pelo Microsoft Internet Explorer 4. Por raz�es de compatibilidade, o Mozilla Firefox 3 tamb�m adicionou suporte a este m�todo.
window.showModalDialog(pUrl, pArguments, pFeatures);
Requer Internet Explorer 4.0 ou mais recente, ou Firefox 3 em diante.
modal=yes
no par�metro de
op��es do m�todo padr�o DOM window.open()
, mas desde Mozilla 1.2.1
(2002), passou a exigir um script confi�vel com o privil�gio de seguran�a
UniversalBrowserWrite
ativado, como medida de seguran�a para evitar
abuso por p�ginas maliciosas.
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite"); window.open(pUrl, pName, "...features...,modal=yes");
file://
), mediante uma
confirma��o de seguran�a, ao habilitar o privil�gio, alertando sobre risco;http://
), com scripts em pacote JAR
assinado digitalmente (com um certificado digital).Eis um exemplo de m�todo JavaScript para abertura de janela modal para funcionar nos dois navegadores. No caso do Mozilla Firefox 1.x e 2.x, funciona somente se for script confi�vel.
function openModal(pUrl, pWidth, pHeight) { if (window.showModalDialog) { return window.showModalDialog(pUrl, window, "dialogWidth:" + pWidth + "px;dialogHeight:" + pHeight + "px"); } else { try { netscape.security.PrivilegeManager.enablePrivilege( "UniversalBrowserWrite"); window.open(pUrl, "wndModal", "width=" + pWidth + ",height=" + pHeight + ",resizable=no,modal=yes"); return true; } catch (e) { alert("Script n�o confi�vel, n�o � poss�vel abrir janela modal."); return false; } } }
Chamando a fun��o de exemplo aqui apresentada: openModal('window_modal_popup.html', 450, 300)
Como esta p�gina n�o tem um script em JAR assinado, ao rodar na web, o Mozilla gera exce��o, que o exemplo trata exibindo uma mensagem de erro. Para ver funcionando no Mozilla Firefox 1.x ou 2.x sem um JAR assinado, salve arquivos locais e abra o arquivo HTML deste exemplo em seu computador.
Baixando e usando o script gratuito subModal, por Subimage Interactive, voc�
deve usar em sua p�gina a folha de estilos CSS submodal.css
e os
scripts common.js
e subModal.js
. Voc� deve tamb�m
incluir, junto com a p�gina, os arquivos de imagem close.gif
, que
exibe na "barra de t�tulo" da janela um controle para fech�-la, e da p�gina
loading.html
, que exibe uma mensagem de espera enquanto a p�gina a
ser exibida como janela modal � carregada pelo navegador. Todos os arquivos
necess�rios est�o inclusos no pacote de distribui��o do subModal.
<link rel="stylesheet" type="text/css" href="submodal.css" /> <script type="text/javascript" src="common.js"></script> <script type="text/javascript" src="submodal.js"></script>
Por JavaScript:
showPopWin('pagina_popup.html', largura, altura, callback)
Por classe de estilo:
<a class="submodal-x-y" href="pagina_popup.html">...</a>
Nas refer�ncias, voc� encontra o download da distribui��o do script subModel e tamb�m outros componentes DHTML que simulam o recurso de janela modal.
Usando o script subModal vers�o mais recente (1.5 usada neste artigo) por
Subimage Interactive. A chamada JavaScript (janela 450 × 300) �:
showPopWin('window_modal_popup.html', 450, 300, null)
. Como link,
a chamada fica: <a class="submodal-450-300" href="window_modal_popup.html">...</a>
.
© 2003-2020, Márcio d'Ávila, mhavila.com.br, direitos reservados. O texto e c�digo-fonte apresentados podem ser referenciados, distribu�dos e utilizados, desde que expressamente citada esta fonte e o crédito do(s) autor(es). A informação aqui apresentada, apesar de todo o esforço para garantir sua precisão e correção, é oferecida "como está", sem quaisquer garantias explícitas ou implícitas decorrentes de sua utilização ou suas conseqüências diretas e indiretas.