dialog标签 对话框元素

　　html<dialog>标签表示用户可以与之交互以执行任务的应用程序的一部分。例如对话框、检查器或窗口。元素用于创建模式和非模式对话框。模式对话框会中断与页面其余部分的交互，而非模式对话框则允许与页面其余部分的交互。

　　应使用 javascript 显示<dialog>元素。使用.showModal()方法显示模态对话框，使用方法显示非模态对话框。可以使用方法或在提交嵌套在元素中的按钮时使用方法.show()关闭对话框。也可以通过按下键关闭模态对话框。

　　用法说明

　　●如果HTML元素具有该属性或用于提交表单的按钮已设置，<form>则可以使用它们来关闭对话框。当通过该方法提交中的时，对话框将关闭，表单控件的状态将保存但不会提交，并且 属性将设置为已激活按钮的值。method="dialog"formmethod="dialog"<form><dialog>dialogreturnValue

　　●css::backdrop伪元素可用于设置模式对话框的背景样式，<dialog>当使用该方法显示对话框时，背景会显示在元素后面HTMLDialogElement.showModal()。例如，此伪元素可用于模糊、变暗或以其他方式模糊模式对话框后面的惰性内容。

　　●应将此属性autofocus添加到用户打开模式对话框后立即与之交互的元素。如果没有其他元素涉及更直接的交互，建议将其添加autofocus到对话框中的关闭按钮，或者如果用户希望点击/激活它来关闭，则将其添加到对话框本身。

　　●不要tabindex向元素添加该属性，<dialog>因为它不具有交互性并且不接收焦点。对话框的内容（包括对话框中的关闭按钮）可以接收焦点并具有交互性。

　　列子：

　　<dialog id="">
　　<p>对话内容...</p>
　　<button id="hide">关闭</button>
　　</dialog>

　　创建模式对话框列子：

<dialog>
  <button autofocus>关闭</button>
  <p>这个模式对话框有一个很酷的背景！</p>
</dialog>
<button>点击显示对话框</button>
<style>
::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}
</style>
<script>
//查找HTML文档中第一个<dialog>元素，并将这个元素赋值给变量dialog
const dialog = document.querySelector("dialog");
//查找紧跟在<dialog>元素之后的<button>元素，并将这个元素的引用存储在名为showButton的常量中
const showButton = document.querySelector("dialog + button");
//查找位于<dialog>元素内部的<button>元素，并将找到的第一个这样的元素的引用存储在名为closeButton的常量中。
const closeButton = document.querySelector("dialog button");
// “显示对话框”按钮以模态方式打开对话框
//添加一个点击事件监听器。当这个按钮被用户点击时，会触发一个箭头函数（() => { dialog.showModal(); }），该函数内部调用了 dialog 变量所引用的 <dialog> 元素的 showModal() 方法。
showButton.addEventListener("click", () => {
  dialog.showModal();
});
// "“关闭”按钮关闭对话框
// 添加一个点击事件监听器。当这个关闭按钮被用户点击时，会触发一个箭头函数（() => { dialog.close(); }），该函数内部调用了 dialog 变量所引用的 <dialog> 元素的 close() 方法。
// close() 方法的作用是关闭 <dialog> 元素。当这个方法被调用时，如果 <dialog> 元素当前是以模态对话框的形式显示的，那么它会被关闭，并且用户将能够重新与页面上的其他元素进行交互。
closeButton.addEventListener("click", () => {
  dialog.close();
});
</script>

使用 方式打开对话框.showModal()，使用 方式关闭对话框.close()。

　　全局属性

　　以下属性是所有 HTML 元素的标准属性。因此，您可以将这些属性与 标记<dialog>（ 除外tabindex）以及所有其他 HTML 标记一起使用。

　　accesskey

　　autocapitalize

　　class

　　contenteditable

　　data-*

　　dir

　　draggable

　　hidden

　　id

　　inputmode

　　is

　　itemid

　　itemprop

　　itemref

　　itemscope

　　itemtype

　　lang

　　part

　　slot

　　spellcheck

　　style

　　tabindex

　　title

　　translate

　　请注意，该tabindex属性不适用于<dialog>元素。

　　有关这些属性的完整解释，请参阅HTML 5 全局属性。

　　事件处理程序

　　事件处理程序内容属性可让您从 HTML 中调用脚本。当发生某个“事件”时，将调用该脚本。每个事件处理程序内容属性处理不同的事件。

　　onabort

　　onauxclick

　　onblur

　　oncancel

　　oncanplay

　　oncanplaythrough

　　onchange

　　onclick

　　onclose

　　oncontextmenu

　　oncopy

　　oncuechange

　　oncut

　　ondblclick

　　ondrag

　　ondragend

　　ondragenter

　　ondragexit

　　ondragleave

　　ondragover

　　ondragstart

　　ondrop

　　ondurationchange

　　onemptied

　　onended

　　onerror

　　onfocus

　　onformdata

　　oninput

　　oninvalid

　　onkeydown

　　onkeypress

　　onkeyup

　　onlanguagechange

　　onload

　　onloadeddata

　　onloadedmetadata

　　onloadstart

　　onmousedown

　　onmouseenter

　　onmouseleave

　　onmousemove

　　onmouseout

　　onmouseover

　　onmouseup

　　onpaste

　　onpause

　　onplay

　　onplaying

　　onprogress

　　onratechange

　　onreset

　　onresize

　　onscroll

　　onsecuritypolicyviolation

　　onseeked

　　onseeking

　　onselect

　　onslotchange

　　onstalled

　　onsubmit

　　onsuspend

　　ontimeupdate

　　ontoggle

　　onvolumechange

　　onwaiting

　　onwheel

　　大多数事件处理程序内容属性可以在所有 HTML 元素上使用，但某些事件处理程序对其使用时间以及适用元素有特定的规则。