From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/html/elemento/dialog/index.html | 152 +++++++++++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 files/es/web/html/elemento/dialog/index.html (limited to 'files/es/web/html/elemento/dialog') 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: +slug: Web/HTML/Elemento/dialog +translation_of: Web/HTML/Element/dialog +--- +
{{HTMLRef}}
+ +

El elemento HTML <dialog> representa una caja de diálogo u otro componente interactivo, como inspector o ventana.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, sectioning root
Permitted contentFlow content
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts flow content
DOM interface{{domxref("HTMLDialogElement")}}
+ +

Atributos

+ +

Este elemento incluye los atributos globales. El atributo tabindex no debe utilizarse en el elemento <dialog>.

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

Notas de uso

+ +

 

+ + + +

 

+ +

Ejemplos

+ +

Ejemplo 1

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

Ejemplo 2

+ +
<!-- 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>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'semantics.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML5.1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

 

+ + + +

{{Compat("html.elements.dialog")}}

+ +

 

+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf