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 Any element that accepts flow content
Permitted ARIA roles alertdialog
DOM interface HTMLDialogElement


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

Indicates that the dialog is active and available for interaction. When the open attribute is not set, it shouldn't be shown to the user.

Usage notes

  • <form> elements can be integrated within a dialog by specifying them with the attribute method="dialog". When such a form is submitted, the dialog is closed with a returnValue attribute set to the value of the submit button used.
  • The ::backdrop CSS pseudo-element can be used to style behind a <dialog> element, for example to dim inaccessible content whilst a modal dialog is active.


Simple example

<dialog open>
  <p>Greetings, one and all!</p>

Advanced example

This example opens a pop-up dialog box containing a form when the "Update details" button is clicked.


<!-- Simple pop-up dialog box, containing a form -->
<dialog open id="favDialog">
  <form method="dialog">
      <p><label for="favAnimal">Favorite animal:</label>
      <select id="favAnimal">
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>

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


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

  // Update button opens a modal dialog
  updateButton.addEventListener('click', function() {

  // Form cancel button closes the dialog box
  cancelButton.addEventListener('click', function() {



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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support37 No531 2 No24 No
open37 No531 2 No24 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support3737 No531 2 No No Yes
open3737 No531 2 No No Yes

1. See bug 840640.

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


Include this polyfill to provide support for older browsers.  


See also

Etiquetas do documento e colaboradores

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