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, com características específicas
(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.
window.showModalDialog(pUrl, pArguments, pFeatures);
Requer Internet Explorer 4.0 ou mais recente.
modal=yes no parâmetro de opções do método padrão DOM window.open(),
mas desde 2002, como medida de segurança para evitar abuso por páginas maliciosas, exige um script confiável com o
privilégio de segurança UniversalBrowserWrite ativado.
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, 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 sem um JAR assinado, salve arquivos locais e abra este 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-2007, 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.