a11y-dialog 介绍
A11y Dialog一个非常轻便和灵活的可访问模态对话框。它没有依赖关系，一个JavaScript API，DOM API和事件处理。
特点
无依赖项利用本机<dialog>元素
overlay叠加点击和关闭对话框ESC
切换aria-*属性
捕捉和恢复焦点
触发事件
DOM和js API快速而微小
安装
npm install a11y-dialog --save
使用
<!--
Main container related notes:
- It can have a different id than `main`,however you will have to pass it as a second argument to the A11yDialog instance. See further down.
-->
<div id="main">
<!--
Here lives the main content of the page.
-->
</div>
<!--
Dialog container related notes:
- It is not the actual dialog window,just the container with which the script interacts.
- It can have a different id than `my-accessible-dialog`,but it needs an `id`
anyway.
-->
<div id="my-accessible-dialog">
<!--
Overlay related notes:
- It has to have the `tabindex="-1"` attribute.
- It doesn’t have to have the `data-a11y-dialog-hide` attribute,however this is recommended. It hides the dialog when clicking outside of it.
-->
<div tabindex="-1" data-a11y-dialog-hide></div>
<!--
Dialog window content related notes:
- It is the actual visual dialog element.
- It may have the `alertdialog` role to make it behave like a “modal”. See the “Usage as a modal” section of the docs.
- It doesn’t have to be a `<dialog>` element,it can be a `<div>` element with the `dialog` or `alertdialog` role (e.g. `<div role="dialog">`).
- It doesn’t have to have the `aria-labelledby` attribute however this is recommended. It should match the `id` of the dialog title.
-->
<dialog aria-labelledby="dialog-title">
<!--
Closing button related notes:
- It does have to have the `type="button"` attribute.
- It does have to have the `data-a11y-dialog-hide` attribute.
- It does have to have an aria-label attribute if you use an icon as content.
-->
<button type="button" data-a11y-dialog-hide aria-label="Close this dialog window">
×
</button>
<!--
Dialog title related notes:
- It should have a different content than `Dialog Title`.
- It can have a different id than `dialog-title`.
-->
<h1 id="dialog-title">Dialog Title</h1>
<!--
Here lives the main content of the dialog.
-->
</dialog>
</div>
网站地址:#
GitHub:https://github.com/edenspiekermann/a11y-dialog
网站描述:一个非常轻便和灵活的可访问模态对话框
a11y-dialog
官方网站：#
小编说
以上是编程之家为你收集整理的a11y-dialog全部内容。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。