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