files/ru/web/api/htmldialogelement/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

---
title: HTMLDialogElement
slug: Web/API/HTMLDialogElement
tags:
  - API
  - Dialog
  - HTMLDialogElement
  - Interface
translation_of: Web/API/HTMLDialogElement
---
<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>

<p><strong><code>HTMLDialogElement</code></strong> - интерфейс взаимодействия, предоставляющий методы для управления {{HTMLElement("dialog")}} элементами. Он наследует свойства и методы от {{domxref("HTMLElement")}}.</p>

<p>{{InheritanceDiagram(600, 80)}}</p>

<h2 id="Свойства">Свойства</h2>

<p><em>Наследует свойства от своего родителя, {{domxref("HTMLElement")}}.</em></p>

<dl>
 <dt>{{domxref("HTMLDialogElement.open")}}</dt>
 <dd>{{domxref("Boolean")}} отражает HTML атрибут элемента {{htmlattrxref("open", "dialog")}}, указывающий на то, доступно ли диалоговое окно для воздействия.</dd>
 <dt>{{domxref("HTMLDialogElement.returnValue")}}</dt>
 <dd>{{domxref("DOMString")}} устанавливает или возвращает передаваемое диалоговому окну значение.</dd>
</dl>

<h2 id="Методы">Методы</h2>

<p><em>Наследует методы своего родителя, {{domxref("HTMLElement")}}.</em></p>

<dl>
 <dt>{{domxref("HTMLDialogElement.close()")}}</dt>
 <dd>Закрывает диалоговое окно. Опциональный {{domxref("DOMString")}} может быть передан как аргумент, обновляющий <code>returnValue</code> диалогового окна.</dd>
 <dt>{{domxref("HTMLDialogElement.show()")}}</dt>
 <dd>Показывает диалоговое окно modelessly, т.е. остаётся возможность взаимодействовать с контентом вне диалогового окна.</dd>
 <dt>{{domxref("HTMLDialogElement.showModal()")}}</dt>
 <dd>Показывает диалог как модальное окно поверх любых других диалоговых окон, которые также могут существовать в данный момент. Взаимодействие с контентом вне диалогового окна заблокировано.</dd>
</dl>

<h2 id="Примеры">Примеры</h2>

<p>Примеры ниже показывают простую кнопку, которая при нажатии открывает {{htmlelement("dialog")}}, содержащий элемент {{htmlelement("form")}}, используя  метод {{domxref("HTMLDialogElement.showModal()")}}. Вы можете нажать кнопку <em>Отмены, </em>чтобы закрыть диалоговое окно (используя функцию {{domxref("HTMLDialogElement.close()")}}), или принять форму, использую кнопку <em>Принятия</em>.</p>

<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" name="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 dialog = document.getElementById('favDialog');
      dialog.returnValue = 'favAnimal';

      function openCheck(dialog) {
        if(dialog.open) {
          console.log('Dialog open');
        } else {
          console.log('Dialog closed');
        }
      }

      // Update button opens a modal dialog
      updateButton.addEventListener('click', function() {
        dialog.showModal();
        openCheck(dialog);
      });

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

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

<div class="note">
<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html">htmldialogelement-basic</a> (<a href="https://mdn.github.io/dom-examples/htmldialogelement-basic/">see it live also</a>).</p>
</div>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#htmldialogelement', 'HTMLDialogElement')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>


<p>{{Compat("api.HTMLDialogElement")}}</p>

<h2 id="Смотри_также">Смотри также</h2>

<ul>
 <li>HTML элемент, реализующий этот интерфейс взаимодействия: {{ HTMLElement("dialog") }}.</li>
</ul>