HarmonyOS开发者限时福利来啦!最高10w+现金激励等你拿~ 了解详情
写点什么

简单聊聊配合 dialog 使用 popover 的问题

作者:Adrian Roselli

  • 2023-06-14
    北京
  • 本文字数:1441 字

    阅读完需:约 5 分钟

简单聊聊配合dialog使用popover的问题

首先澄清一点,这里要讨论的不是 popover 和 dialog 谁好谁错,也不是要站队支持哪一方。我想聊的是如何通过模式混合和模式匹配帮助用户解决潜在问题。

 

00:00 / 00:00
    1.0x
    • 3.0x
    • 2.5x
    • 2.0x
    • 1.5x
    • 1.25x
    • 1.0x
    • 0.75x
    • 0.5x
    网页全屏
    全屏
    00:00

     

    台本:视频演示的是弹窗跳出来,挡住了带 ARIA dialog 角色的<div>模态对话框。焦点切换和手动关闭都没法解决这个遮挡问题。但是,原生 HTML <dialog>元素能够正常位于弹窗更前方。演示中的对话框是一段超时警告,提示用户按下按钮,否则会在一份复杂表单的第 14 步(共 72 步)中被注销。

     

    这个演示页面,模拟的是我们怎么争分夺秒地填写一份复杂的多步骤表单。当用户点击切换提示来获取关于当前字段的更多信息时,系统会弹出一个对话框,提示用户除非点击按钮、否则将会被注销。但这个延时按钮被切换提示给挡住了。用户按下 Esc 想关闭切换提示,但关掉的却是对话框。也就是说,用户没法正常延长注销时间,只能眼睁睁看着自己已经填完的内容全部作废,然后气得骂娘。

     

    但使用〈dialog〉元素实现的对话框就不会遇到这个问题。

     

    所以我强烈建议大家,除非确认所有模态对话框都已经被转换成了原生 HTML <dialog>、或者经过了严格的布局位置测试,否则别轻易在项目中引入 popover。有些朋友可能轻蔑地笑了——别嚣张,您只是目前还没用上,再过一、两年可就说不准了。

     

    这个示例来自 Chrome Canary 115,并不属于最终版本,所以情况仍有改善的可能。

     

    来点技术

     

    我曾在之前的文章中讨论过用<div role="dialog">实现对话框的好处,这种方式通过了可访问性测试而且效果良好。其中还用到了 inert polyfill,我不确定 inert 会不会影响这次的演示,感兴趣的朋友可以亲自试试。

     

    Scott O’Hara 也在今年 1 月的帖子(https://www.scottohara.me/blog/2023/01/26/use-the-dialog-element.html)中,整理了一份关于在对话框中合理使用原生 HTML <dialog>元素的指导。

     

    5 月 23 日,Google Chrome 开发者博客发布了 popover API 的介绍帖子。其中解释了手动关闭弹窗和自动关闭弹窗的区别,二者在演示视频里都有体现。后者是在弹窗容器失去焦点时关闭,而前者则要求用户手动触发。

     

    在视频中,popover 关闭方法并不会影响它与<div role="dialog">的交互。但是将<dialog> 与手动关闭的 popover 一同使用时,弹窗容器会被放置在模态后面且不会遮挡我们正确查看模态内容。当弹窗被设置为自动(浅色,默认)关闭时,则<dialog> 一出现弹窗就会消失。

     

    下图所示为实际效果。我没有费力气修改切换提示,实在太麻烦了。总之截至本文撰稿时,这些情况仅适用于 Chrome Canary。欢迎大家自己上手体验,但我可以保证,切换提示就是不愿出现在我们希望它们出现的位置上。



    回顾

     

    说点题外话,如果大家只打算用 popover 实现视觉或者行为效果,而无需考虑语义、结构、DOM 顺序、内容乃至附加的元素流,那要不要 popover 其实影响不大。

     

    考虑到目前 <dialog>的支持效果仍然比 popover 更好,所以在新项目中继续用 <dialog>应该也没啥问题。但如果您的新项目需要用到稳健性较差的框架/库,那么根据 Scott 的指导意见,最好别选 <dialog>。

     

    对于现有项目,其中或多或少可能存在与非-<dialog>代码相关的技术债务。那么在用<dialog>替换现有对话框之前,建议大家先别急着把任何 popover 功能列进开发日程,否则情况就是视频演示那个样子。

     

    原文链接:


    https://adrianroselli.com/2023/05/brief-note-on-popovers-with-dialogs.html


    相关阅读:


    Vue3 使用 Teleport 封装 一个 Dialog

    Dialog 对应的 Context 必须是 Activity 吗?

    面向函数编程:关于函数式组件、dialog 的 api 化

    Flutter 让你的 Dialog 脱胎换骨吧!

    2023-06-14 14:3492560

    评论

    发布
    暂无评论
    发现更多内容

    17 网站架构的伸缩性设计

    爱好编程进阶

    Java 程序员 后端开发

    30岁码农的一次面试经历:不委屈自己

    爱好编程进阶

    Java 程序员 后端开发

    985毕业,半路出家28岁进军Java,坚持了三年现如今年薪36W

    爱好编程进阶

    Java 程序员 后端开发

    BIO、NIO、AIO 介绍和适用场景分析

    爱好编程进阶

    Java 程序员 后端开发

    git(8)Git 与其他系统

    爱好编程进阶

    Java 程序员 后端开发

    16 条 yyds 的代码规范

    爱好编程进阶

    Java 程序员 后端开发

    GitHub上超火的阿里调优专家的677页Java性能调优笔记,已让我拿下5个offer

    爱好编程进阶

    Java 程序员 后端开发

    (项目实战)如何结合k8s和pipeline的流水线,并通过k8s接口完成镜像升级

    爱好编程进阶

    Java 程序员 后端开发

    2021金三银四巨作!10万字!阿里高工纯手码JDK源码笔记 带你飙向实战

    爱好编程进阶

    Java 程序员 后端开发

    2021金三银四吃透这份Java面试突击手册!成功跳槽涨薪30K

    爱好编程进阶

    Java 程序员 后端开发

    ArrayList 与 LinkedList 的方法及其区别

    爱好编程进阶

    程序员 后端开发

    Hibernate实现CRUD(附项目源码)

    爱好编程进阶

    Java 程序员 后端开发

    JAVA API调用elasticsearch实现基本增删改查

    爱好编程进阶

    程序员 后端开发

    2020最新互联网数据调查显示,Kotlin-势必取代-Java?

    爱好编程进阶

    Java 程序员 后端开发

    SAP 云平台(Cloud Platform)架构概述

    汪子熙

    云计算 云平台 SAP 云计算架构师 4月月更

    BATJAndroid高级工程师大厂面试题集合之Java-基础面试知识点

    爱好编程进阶

    Java 程序员 后端开发

    dubbo实战之二:与SpringBoot集成

    爱好编程进阶

    Java 程序员 后端开发

    敏捷开发中如何从容应对需求变更?

    华为云开发者联盟

    敏捷开发 需求 软件开发 需求变更

    21年GitHub标星19

    爱好编程进阶

    Java 程序员 后端开发

    Choreographer全解析

    爱好编程进阶

    Java 程序员 后端开发

    5年Java后台经验程序员,历经6面,跳槽腾讯

    爱好编程进阶

    Java 程序员 后端开发

    架构实战营 - 总结

    李大虾

    #架构实战营 「架构实战营」

    AOP实战篇 如何轻松实现日志功能,戳这

    爱好编程进阶

    Java 程序员 后端开发

    curl 的用法指南

    爱好编程进阶

    Java 程序员 后端开发

    网易云信 QUIC 应用优化实践

    网易云信

    音视频开发

    Docker Swarm从部署到基本操作

    爱好编程进阶

    Java 程序员 后端开发

    OpenMLDB:线上线下一致的生产级特征计算平台

    第四范式开发者社区

    人工智能 机器学习 数据库 开源 特征

    20万+字,熬夜整理了一份程序员不可或缺的软技能高分原创电子书送给你

    爱好编程进阶

    Java 程序员 后端开发

    @产品部 -- 腾讯策划部是如何培养用户的《王者荣耀

    爱好编程进阶

    Java 程序员 后端开发

    Go 语言入门很简单:net/http 包

    宇宙之一粟

    HTTP Go web 4月月更

    Demo:第三章:权限框架spring security oauth2

    爱好编程进阶

    程序员 后端开发

    简单聊聊配合dialog使用popover的问题_大前端_InfoQ精选文章