Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

O elemento HTML <dialog> representa uma caixa de diálogo ou outro componente interativo, tal como um inspetor ou janela.

Content categories Flow content, sectioning root
Permitted content Flow content
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Qualquer elemento que aceite flow content
Permitted ARIA roles alertdialog
DOM interface HTMLDialogElement

Attributes

Este elemento inclui os atributos globais. O atributo tabindex não deve ser utilizado no elemento <dialog>.

open
Indica que o Dialog está ativo e pronto para uso. Quando o atributo Open não esta setado ele não deve ser mostrado ao usuário.

Usage notes

 

  • O elemento <form> pode ser integrado com o Dialog especificando ele com o atributo method="dialog". Quando este form for submetido o elemento Dialog é fechado com o atributo returnValue setado para o valor do botão submit usado.
  • O pseudo-elemento CSS ::backdrop pode ser usado para estilizar o elemento <dialog>, como por exemplo para escurecer o conteúdo inacessível, enquanto uma modal de diálogo está ativa.

Examples

Simple example

<dialog open>
  <p>Olá para todos!</p>
</dialog>

Advanced example

Este exemplo abre uma caixa de dialogo contendo um formulário quando o botão "Update details" é clicado.

HTML

<!-- Um dialog simples contendo um form -->
<dialog open id="favDialog">
  <form method="dialog">
    <section>
      <p><label for="favAnimal">Favorite animal:</label>
      <select id="favAnimal">
        <option></option>
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      </select></p>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

JavaScript

(function() {
  var updateButton = document.getElementById('updateDetails');
  var cancelButton = document.getElementById('cancel');
  var favDialog = document.getElementById('favDialog');

  // O botão Update abre uma Dialog
  updateButton.addEventListener('click', function() {
    favDialog.showModal();
  });

  // O botão cancelButtom fecha uma Dialog
  cancelButton.addEventListener('click', function() {
    favDialog.close();
  });
})();

Result

Specifications

Specification Status Comment
HTML Living Standard
The definition of '<dialog>' in that specification.
Padrão em tempo real  
HTML 5.2
The definition of '<dialog>' in that specification.
Recomendação Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 37Edge No support NoFirefox Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes See bug 840640.
Disabled From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari No support NoWebView Android Full support 37Chrome Android Full support 37Edge Mobile No support NoFirefox Android Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes See bug 840640.
Disabled From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android Full support Yes
openChrome Full support 37Edge No support NoFirefox Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes See bug 840640.
Disabled From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari No support NoWebView Android Full support 37Chrome Android Full support 37Edge Mobile No support NoFirefox Android Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes See bug 840640.
Disabled From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Polyfills

Inclua este polyfill para suportar browsers antigos.

dialog-polyfill

See also

Etiquetas do documento e colaboradores

Colaboradores desta página: marceloch2, chicojunior
Última atualização por: marceloch2,