---
title: '<dialog>: Phần tử Hộp thoại'
slug: Web/HTML/Element/dialog
tags:
  - Dialog
  - HTML
  - Hộp thoại
  - Phần tử
  - Phần tử HTML tương tác được
  - Tham khảo
  - Thử nghiệm
  - Web
translation_of: Web/HTML/Element/dialog
---
<p><strong>Phần tử HTML</strong> <code>&lt;dialog&gt;</code> đại diện cho một hộp thoại hoặc một component tương tác được, chẳng hạn như giao diện cửa sổ hoặc khảo sát.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Loại nội dung</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">Nội dung cho phép</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a></td>
  </tr>
  <tr>
   <th scope="row">Thẻ được phép bỏ</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Thẻ cha cho phép</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">ARIA role cho phép</th>
   <td>{{ARIARole("alertdialog")}}</td>
  </tr>
  <tr>
   <th scope="row">Giao diện lập trình DOM</th>
   <td>{{domxref("HTMLDialogElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Thuộc_tính">Thuộc tính</h2>

<p>Phần tử này có các <a href="/en-US/docs/Web/HTML/Global_attributes">thuộc tính chung</a>. Thuộc tính <code>tabindex</code> không được phép sử dụng với phần tử <code>&lt;dialog&gt;</code>.</p>

<dl>
 <dt>{{htmlattrdef("open")}}</dt>
 <dd>Cho biết hộp thoại có được kích hoạt và sẵn sàng tương tác hay không. Khi thuộc tính open này không được bật (không có trong thẻ), hộp thoại sẽ không hiện ra cho người dùng.</dd>
</dl>

<h2 id="Lưu_ý_khi_sử_dụng">Lưu ý khi sử dụng</h2>

<ul>
 <li>Phần tử <code>&lt;form&gt;</code> có thể được tính hợp với dialog bằng cách thêm thuộc tính <code>method="dialog"</code> tại <code>&lt;form&gt;</code> bên trong. Khi form được gửi đi, hộp thoại sẽ đóng lại với <code>returnValue</code> là giá trị <code>value</code> của nút submit được bấm.</li>
 <li>CSS pseudo-element {{cssxref('::backdrop')}} là một phần tử giả phía sau hộp thoại dùng để che đi hoặc làm mờ nội dung bên dưới khi mà hộp thoại đang hiện ra. Backdrop chỉ được hiển thị khi phần tử dialog được hiện với <code>dialog.showModal()</code>.</li>
</ul>

<h2 id="Ví_dụ">Ví dụ</h2>

<h3 id="Ví_dụ_đơn_giản">Ví dụ đơn giản</h3>

<pre class="brush: html">&lt;dialog open&gt;
  &lt;p&gt;Greetings, one and all!&lt;/p&gt;
&lt;/dialog&gt;
</pre>

<h3 id="Ví_dụ_nâng_cao">Ví dụ nâng cao</h3>

<p>Trong ví dụ này, một hộp thoại sẽ hiện ra với một form bên trong khi mà nút "Update details" được bấm.</p>

<h4 id="HTML">HTML</h4>

<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;p&gt;&lt;label&gt;Favorite animal:
      &lt;select&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;/label&gt;&lt;/p&gt;
    &lt;menu&gt;
      &lt;button&gt;Cancel&lt;/button&gt;
      &lt;button&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;
</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">(function() {
  var updateButton = document.getElementById('updateDetails');
  var favDialog = document.getElementById('favDialog');

  // “Update details” button opens the &lt;dialog&gt; modally
  updateButton.addEventListener('click', function() {
    favDialog.showModal();
  });
})();
</pre>

<h3 id="Kết_quả_nhận_được">Kết quả nhận được</h3>

<p>{{EmbedLiveSample("Ví_dụ_nâng_cao", "100%", 300)}}</p>

<p>Nút submit nào được bấm có thể được xác định với <a href="/en-US/docs/Web/API/HTMLDialogElement/returnValue">returnValue</a> của <code>favDialog</code>.</p>

<h2 id="Đặc_tả">Đặc tả</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Đặc tả</th>
   <th scope="col">Trạng thái</th>
   <th scope="col">Ghi chú</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
   <td>{{Spec2('HTML5.2')}}</td>
   <td>Định nghĩa ban đầu.</td>
  </tr>
 </tbody>
</table>

<h2 id="Trình_duyệt_hỗ_trợ">Trình duyệt hỗ trợ</h2>



<p>{{Compat("html.elements.dialog")}}</p>

<h2 id="Polyfill">Polyfill</h2>

<p>Dùng polyfill sau để hỗ trợ <code>&lt;dialog&gt;</code> cho các trình duyệt cũ:</p>

<p><a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a></p>

<h2 id="Xem_thêm">Xem thêm</h2>

<ul>
 <li>Sự kiện {{event("close")}}</li>
 <li>Sự kiện {{event("cancel")}}</li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Forms">Hướng dẫn HTML form</a>.</li>
</ul>

<div>{{HTMLRef}}</div>