Janela modal na web

Márcio d'Ávila, 8 de dezembro de 2006. Revisão 3, 1º de setembro de 2008.
Categoria: Internet: Cliente: JavaScript

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.

Janela modal real - recursos nativos

Microsoft Internet Explorer / Mozilla Firefox 3:
Objeto 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.

Mozilla Firefox até 2.x:
O Mozilla permite uma definição 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");
O privilégio de segurança funciona apenas nos scripts confiáveis do Mozilla/Firefox, que são aqueles:
  • em arquivos locais (file://), mediante uma confirmação de segurança, ao habilitar o privilégio, alertando sobre risco;
  • em endereços web (http://), com scripts em pacote JAR assinado digitalmente (com um certificado digital).

Fora estes dois casos, a tentativa de abrir uma janela modal gera uma exceção na execução do script.

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;
		}
	}
}

Exemplo

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.

Referências

Simulando janela modal

Script subModal

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.

Exemplo

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>.

Simular janela modal - link

Referências


Firefox - A web de volta
Creative Commons License

© 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.