Como fechar um ShowModalDialog

Escrito por cathlene s. baptista | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fechar um ShowModalDialog
Uma janela modal permanece em foco até ser fechada explicitamente (man thinking about internet security image by patrimonio designs from Fotolia.com)

O método de JavaScript "window.showModalDialog()" carrega um URL em uma janela de diálogo de tipo modal. Uma janela de diálogo modal aberto dessa forma será um objeto que, ao ser ativado, permanecerá por cima de todas as outras janelas do navegador até que você a feche explicitamente. Enquanto a janela modal esteja aberta, você não poderá interagir com outras janelas ou passar de uma para outra. Uma caixa de diálogo aberta com o método showModalDialog() é um tipo específico de janela e pode ser fechado usando os mesmos métodos do que para as janelas normais.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

O que você precisa?

  • Navegador web com JavaScript habilitado, como por exemplo Internet Explorer, ou um que suporte o showModalDialog()
  • Editor de texto

Lista completaMinimizar

Instruções

  1. 1

    Use um editor de texto para criar um novo arquivo chamado modal.html. Digite o código HTML para mostrar um campo de texto. Etiquete o campo como "Nome", adicione uma quebra de linha usando um tag e salve o arquivo.

    <html> <body> Nome: <input type="text"><br > </body> </html>

  2. 2

    Use um editor de texto para criar um segundo arquivo chamado pagina_interna.html. Adicione um botão HTML que use um evento onclick() e o método window.close() para fechar a janela modal. Etiquete o botão como "Fechar esta janela": Salve e feche o arquivo.

    <html> <head> </head> <body> <button onclick=window.close();>Fechar esta janela</button> </body> </html>

  3. 3

    Reabra o arquivo modal.html. Adicione uma função do JavaScript à seção <head> do código HTML, chamada showModal(). Adicione um método showModalDialog() à função showModal(). Este método toma três argumentos: a página a mostrar na janela modal, argumentos opcionais que podem ser passados para ela, e características físicas opcionais da janela. Adicione esses argumentos e salve o arquivo.

    <html> <head> <script language="JavaScript"> function showModal() { window.showModalDialog("pagina_interna.html", “”, "dialogWidth:200px; dialogHeight:200px;") ; } </script> </head> <body> Nome: <input type="text">

    </body> </html>

  4. 4

    Continue editando o arquivo e adicione um botão HTML embaixo da caixa de texto "Nome:", o qual usará o evento onclick() para chamar a função showModal(). Etiquete o botão como "Enviar", salve e feche o arquivo modal.html.

    <html> <head> <script language="JavaScript"> function showModal() { window.showModalDialog("pagina_interna.html", "", "dialogWidth:200px; dialogHeight:200px;") ; } </script> </head> <body> Nome: <input type="text"><br > <button onClick="showModal();">Enviar</button> </body> </html>

  5. 5

    Abra o arquivo modal.html em um navegador web que suporte o método showModalDialog(). Não complete o campo "Nome:" e clique no botão "Enviar". A caixa de diálogo modal abrirá. Mova-a para um lado e tente completar o campo "Nome:" mostrado atrás. Como a caixa de diálogo modal está aberta, o arquivo modal.html não poderá tomar o foco e ser editada. Clique no botão "Fechar esta janela" para fechar a janela modal.

Dicas & Advertências

  • As funções que fecham caixas de diálogo comuns (não modais) também podem fechar diálogos modais, entre elas está a self.close(), que fecha ao clicar no botão "fechar" (X).
  • Nem todos os navegadores suportam a função showModalDialog(), embora a maioria dos navegadores modernos o façam. Veja na seção "Recursos" informações sobre como mostrar um quadro de diálogo modal em navegadores que não a suportem.
  • As caixas de diálogo abertas com showModalDialog() possuem acesso à propriedade dialogArguments. Use esta propriedade para enviar informação para as mesmas.
  • Os formulários modais podem confundir os usuários se não estiverem bem implementados e sinalizados.
  • As janelas abertas com showModalDialog() podem ter problemas ao retornar informação.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível