资源分类

A11y Dialog一个非常轻便和灵活的可访问模态对话框。它没有依赖关系，一个JavaScript api，dom API和事件处理。 

特点

无依赖项
利用本机<dialog>元素
overlay叠加点击和关闭对话框ESC
切换aria-*属性
捕捉和恢复焦点
触发事件
DOM和JS 

安装

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>

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/2859