From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/html/element/dialog/index.html | 251 ++++++++++++++++++++++++++++ 1 file changed, 251 insertions(+) create mode 100644 files/ru/web/html/element/dialog/index.html (limited to 'files/ru/web/html/element/dialog') diff --git a/files/ru/web/html/element/dialog/index.html b/files/ru/web/html/element/dialog/index.html new file mode 100644 index 0000000000..38ca0276b5 --- /dev/null +++ b/files/ru/web/html/element/dialog/index.html @@ -0,0 +1,251 @@ +--- +title: +slug: Web/HTML/Element/dialog +tags: + - Element + - HTML + - HTML interactive elements + - Reference + - Web + - Диалог + - Экспериментальный + - Элемент +translation_of: Web/HTML/Element/dialog +--- +
{{SeeCompatTable}}
+ +

HTML-элемент <dialog> определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно. Элементы <form> могут интегрироваться с диалогом с помощью указания атрибута method="dialog". Когда отправляется такая форма, диалог закрывается с returnValue равным value нажатой кнопки submit.

+ +

{{cssxref('::backdrop')}} CSS псевдо-элемент может быть использован для стилизации фона подложки элемента  <dialog>, например для затемнения недоступного содержимого, пока диалог активен.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Категории контентаОсновной поток, секционный контент
Разрешённый контентОсновной поток
Опускание тегов{{no_tag_omission}}
Разрешённые родительские элементыЛюбой элемент, в котором разрешен основной поток
DOM-интерфейс{{domxref("HTMLDialogElement")}}
+ +

Атрибуты

+ +

Этот элемент включает в себя общие атрибуты. Атрибут tabindex не должен использоваться с <dialog> элементом.

+ +
+
{{htmlattrdef("open")}}
+
Этот атрибут сообщает о том, что диалог активен и доступен для взаимодействия. Когда атрибут open не установлен, диалог не должен быть видим для пользователя.
+
+ +

Примеры

+ +

Пример 1

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

Пример 2

+ +
<!-- Простой попап диалог с формой -->
+<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>
+
+ +
<!-- Простой попап диалог с формой -->
+<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>
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусПримечание
{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML5.1')}}Initial definition
+ +

Совместимость в браузерах

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support37{{CompatNo}}[1]{{CompatNo}}24{{CompatNo}}
Anchor points{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support37{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Anchor points{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Смотри {{bug("840640")}}.

+ +

Смотрите также

+ + + +
{{HTMLRef}}
-- cgit v1.2.3-54-g00ecf