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, 0 insertions, 152 deletions
diff --git a/files/es/web/html/elemento/dialog/index.html b/files/es/web/html/elemento/dialog/index.html deleted file mode 100644 index e44363c003..0000000000 --- a/files/es/web/html/elemento/dialog/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -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> |