files/es/web/html/elemento/dialog/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

---
title: <dialog>
slug: Web/HTML/Elemento/dialog
translation_of: Web/HTML/Element/dialog
---
<div>{{HTMLRef}}</div>

<p>El <strong>elemento</strong> <strong>HTML <code>&lt;dialog&gt;</code> </strong>representa una caja de diálogo u otro componente interactivo, como inspector o ventana.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">sectioning root</a></td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a></td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Permitted parent elements</th>
   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a></td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLDialogElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributos">Atributos</h2>

<p>Este elemento incluye los <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>. El atributo <code>tabindex</code> no debe utilizarse en el elemento <code>&lt;dialog&gt;</code>.</p>

<dl>
 <dt>{{htmlattrdef("open")}}</dt>
 <dd>Indica que el diálogo está activo y disponible para interactuar. Cuando el atributo open no está asignado, no debe mostrarse al usuario.</dd>
</dl>

<h2 id="Notas_de_uso">Notas de uso</h2>

<p> </p>

<ul>
 <li>Los elementos <code>&lt;form&gt;</code> pueden integrarse dentro de un diálogo  especificándolos con el atributo <code>method="dialog"</code>. Cuando se envía un formulario, el diálogo se cierra con un atributo {{domxref("HTMLDialogElement.returnValue", "returnValue")}} asignado con el <code>value</code> del botón utilizado.</li>
 <li>El pseudo-elemento {{cssxref('::backdrop')}} de CSS puede utilizarse para dar estilos al elemento <code>&lt;dialog&gt;</code>, por ejemplo para atenuar contenido inaccesible mientras el diálogo modal esté activo.</li>
</ul>

<p> </p>

<h2 id="Ejemplos">Ejemplos</h2>

<h3 id="Ejemplo_1">Ejemplo 1</h3>

<pre class="brush: html">&lt;dialog open&gt;
  &lt;p&gt;Greetings, one and all!&lt;/p&gt;
&lt;/dialog&gt;
</pre>

<h3 id="Ejemplo_2">Ejemplo 2</h3>

<pre class="brush: html">&lt;!-- Simple pop-up dialog box, containing a form --&gt;
&lt;dialog id="favDialog"&gt;
  &lt;form method="dialog"&gt;
    &lt;section&gt;
      &lt;p&gt;&lt;label for="favAnimal"&gt;Favorite animal:&lt;/label&gt;
      &lt;select id="favAnimal"&gt;
        &lt;option&gt;&lt;/option&gt;
        &lt;option&gt;Brine shrimp&lt;/option&gt;
        &lt;option&gt;Red panda&lt;/option&gt;
        &lt;option&gt;Spider monkey&lt;/option&gt;
      &lt;/select&gt;&lt;/p&gt;
    &lt;/section&gt;
    &lt;menu&gt;
      &lt;button id="cancel" type="reset"&gt;Cancel&lt;/button&gt;
      &lt;button type="submit"&gt;Confirm&lt;/button&gt;
    &lt;/menu&gt;
  &lt;/form&gt;
&lt;/dialog&gt;

&lt;menu&gt;
  &lt;button id="updateDetails"&gt;Update details&lt;/button&gt;
&lt;/menu&gt;

&lt;script&gt;
  (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() {
      favDialog.showModal();
    });

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

  })();
&lt;/script&gt;
</pre>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'semantics.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>

<p> </p>

<div class="hidden">
<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>

<p>{{Compat("html.elements.dialog")}}</p>

<p> </p>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li><a href="/en-US/docs/Web/Guide/HTML/Forms">Formularios HTML</a>.</li>
 <li>El evento {{event("close")}}</li>
 <li>El evento {{event("cancel")}}</li>
 <li>El pseudo-elemento {{cssxref("::backdrop")}}</li>
</ul>