diff options
Diffstat (limited to 'files/es/web/html/elemento/dialog/index.html')
| -rw-r--r-- | files/es/web/html/elemento/dialog/index.html | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/files/es/web/html/elemento/dialog/index.html b/files/es/web/html/elemento/dialog/index.html new file mode 100644 index 0000000000..e44363c003 --- /dev/null +++ b/files/es/web/html/elemento/dialog/index.html @@ -0,0 +1,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><dialog></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><dialog></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><form></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><dialog></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"><dialog open> + <p>Greetings, one and all!</p> +</dialog> +</pre> + +<h3 id="Ejemplo_2">Ejemplo 2</h3> + +<pre class="brush: html"><!-- Simple pop-up dialog box, containing a form --> +<dialog 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> + +<script> + (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(); + }); + + })(); +</script> +</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', '<dialog>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'semantics.html#the-dialog-element', '<dialog>')}}</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> |