<dialog>: O elemento Dialog
===========================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
O **elemento HTML `<dialog>`** representa uma caixa de diálogo ou outro componente interativo, tal como um inspetor ou janela.

|  |  |
| --- | --- |
| Categorias de conteúdo | 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 (en-US)` |
| DOM interface | `HTMLDialogElement` (en-US) |

Atributos
---------

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 for definido, ele não deve ser mostrado ao usuário.

Notas de uso
------------

* Elementos de formulário (`<form>`) podem ser integrados dentro de um elemento `<dialog>`, especificando-os com o atributo `method="dialog"`. Quando esse formulário é submetido, o diálogo é fechado com o seu `returnValue` (en-US) (valor de retorno) configurado para o valor botão `submit` do formulário que foi usado.
* O pseudo-elemento CSS `::backdrop` pode ser usado para estilizar o fundo de um elemento `<dialog>`, como um escurecer um conteúdo inacessível enquanto uma janela `modal` está aberta, por exemplo. O backdrop(pano de fundo) só está disponível quando um diálogo é exibido com `HTMLDialogElement.showModal()` (en-US).
Exemplos
--------

### Exemplo simples


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

### Exemplo Avançado

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

#### HTML


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


```js
(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();
  });
})();
```

### Resultado

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-dialog-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Polyfills
---------

Inclua este polyfill para suportar browsers antigos.

dialog-polyfill

Veja também
-----------

* O `close` evento
* O `cancel` evento
* Guia de formulários HTML.