html5 原生 弹窗,一起来看 HTML 5.2 中新的原生元素 dialog
不到一个月前,HTML 5.2 正式成为 W3C 的推荐标准(REC),其中,推出了一个新的原生模态对话框元素 ,乍一看,可能感觉它就是一个新增的元素,然而,作者最近在玩的时候,发现它确实是一个值得期待和很有意思的元素,在这里分享给大家
这是 最基础的示例
Native dialog box!
其中,open 属性表示此时 dialog 是可见的,如果没有 open,dialog 将会隐藏,你可以使用 JavaScipt 将它显现出来,此时,dialog 渲染如下
它 绝对定位 于页面之上,就如我们期望的一样,出现在内容的上方,并且 水平居中,默认情况下,它 和内容一样宽
基本操作
JavaScipt 有几个 方法 和 属性 可以很方便地处理 dialog 元素,使用最多的可能还是 showModal() 和 close()
const modal = document.querySelector('dialog');
// makes modal appear (adds `open` attribute)
modal.showModal();
// hides modal (removes `open` attribute)
modal.close();
当你使用 showModal() 来打开 dialog 时,将会在 dialog 周围加一层阴影,阻止用户与 非 diglog 元素的交互,默认情况下,阴影是 完全透明 的,你可以使用 CSS 来修改它
按 Esc 可以关闭 dialog,你也可以提供一个按钮来触发 close()
还有一个方法是 show(),它也可以让 dialog 显现,但与 showModal() 不同的是它没有阴影,用户可以与非 dialog 元素进行交互
浏览器支持和 Polyfill
目前,只有 chrome 支持 ,Firefox 需要在 about:config 里允许 dom.dialog_element.enabled 才能正常使用,我猜想,Firefox 在不久的将来就会支持
上图为 caniuse.com 关于 dialog 特性主流浏览器的兼容情况
幸运的是,我们可以使用 dialog-polyfill 来缓解这种尴尬,它既提供了 JavaScript 的行为,也包含了默认的样式,我们可以使用 npm 来安装它,也可以使用
只是,在使用它时,每个 dialog 需要使用下面语句进行初始化
dialogPolyfill.registerDialog(dialog);
并且,它并不会取代浏览器原生的行为
样式
打开和关闭模态框是最基本的,但这是肯定不够的, 最开始时样式是不怎么好看的,因此,我们需要自定义它的样式,此外,我们可以通过设置伪元素 ::backdrop 来优化 显现时背影的样式
dialog {
padding: 0;
width: 478px;
text-align: center;
vertical-align: middle;
border-radius: 5px;
border: 0;
}
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.1);
}
为了兼容老的浏览器,使用 polyfill 时,::backdrop 是不起作用的,但 polyfill 会在 dialog 后面添加一个 .backdrop 元素,我们可以像下面这样定位它
dialog + .backdrop {
background-color: rgba(0, 0, 0, 0.4);
}
接下来,是时候向 bialog 里添加更多的内容,一般包括 header, body 和 footer
sweet dialog
This is a sweet dialog, which is much better.
Get
最后,在添加一些 CSS,你就能得到你想要的
进阶操作
通常,我们期望能从 dialog 中获取一些用户的信息。关闭 dialog 时,我们可以给 close() 传递一个 string,然后通过 dialog 元素的 returnValue 属性来获取
modal.close('Accepted');
console.log(modal.returnValue); // logs `Accepted`
当然,还存在额外的事件我们可以监听,其中,最常用的可能是 close(关闭 dialog 时触发),还有 cancel (用户按 Esc 关闭 dialog 时触发)
此外,我们可能还期望点击 dialog 旁边的阴影来关闭,当然,这也是有解决办法的。点击阴影会触发 dialog 的点击事件,如果 dialog 的子元素占满了整个 dialog,那么我们可以通过监听 dialog 的点击,当 target 为 modal 时来关闭它
modal.addEventListener('click', (event) => {
if (event.target === modal) {
modal.close('cancelled');
}
});
当然,这不是完美的,但它确实是有效的,如果你有更好的方式,欢迎在评论中交流
总结
说了这么多,不如自己实际演练一番,作者也做了一个 demo,欢迎参考
html5 原生 弹窗,一起来看 HTML 5.2 中新的原生元素 dialog相关推荐
- 下列不属于html5语义元素,HTML5 新的语义元素
HTML5 提供了新的语义元素来明确一个Web页面的不同部分: HTML5中新的语义元素 HTML5 元素 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 根据W ...
- 下面是html5中新增的结构元素的是,HTML5的新的结构元素介绍
HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如和 ,它们已经被 CSS完全取代. 其他取消的属性:acronym ...
- 每一个企业都能成为新云原生企业
点击上方关注我们! 互联网企业一定是云原生企业吗? 不一定! 生于云.长于云的企业就一定是云原生企业吗? 并不完全! 那么,什么样的企业才能称之为云原生企业呢?云原生的概念一直处于不断变化.演进之中, ...
- html语言中的表单元素,HTML5中的表单元素有哪些
摘要 腾兴网为您分享:HTML5中的表单元素有哪些,指南针,之了课堂,云端学习,易视云3等软件知识,以及挣钱花,猎豹浏览器本,移动彩铃,豆瓣音乐,mine,dnf雪人像素头补丁,偶像来了,许鲜网,长治 ...
- 初试Android原生弹窗
初试Android原生弹窗 最近遇到一个蛋疼的上架审核,说是未弹出隐私协议之前APP就已经在收集传感器信息了,后来查了之后发现因为弹窗弹的时机有问题,引擎里面已经在收集传感器信息了. 本来想着找到那个 ...
- 使用 HTML5、CSS3 和 MathML 在 EPUB 3 中制作版式丰富的出版物
探索用于高级排版和印刷的新一代开放电子书标准 EPUB 3.0 是最新的行业标准 XML 电子书格式,它采用了 HTML5 和 CSS3,因而融入了现代 Web 技术.它重点关注 XML 驱动的工具包 ...
- 阿里巴巴云原生应用安全防护实践与 OpenKruise 的新领域
作者 | 王思宇(酒祝) 来源|阿里巴巴云原生公众号 得益于 Kubernetes 面向终态的理念,云原生架构天然具备高度自动化的能力.然而,面向终态的自动化是一把"双刃剑",它既 ...
- [html] HTML5中新添加的表单属性有哪些?
[html] HTML5中新添加的表单属性有哪些? 用的最多的就是一个 placeholder 属性了,其他的基本都不知道,借机学习下 HTML5 表单属性,学完之后感觉我们很多自定义表单可以不用做了 ...
- 原生分布式数据库与分库分表中间件、云原生数据库有何区别
如今,我们正处于数据库从互联网基础软件转变为社会数字化基础软件的时代,在传统集中式数据库已不能满足大规模数据承载需求与高并发处理需求的形势下,基于海量数据场景应用而生的分布式数据库迎来应用热潮.据ID ...
最新文章
- Python设计模式-解释器模式
- 网络基准测试Netperf
- ABAP的子程序参数注意点
- 专科学历事业单位工资计算机,事业单位人来告诉你:学历跟入编之后待遇关系有多大!很直接...
- 2.Nginx学习-The HTTP Core module
- java中如何运行小程序_一起学java(一)——运行第一个小程序
- 字符串 - KMP模式匹配
- php-resque 轻量级队列
- Springboot项目中Pom.xml报错
- 文本的平均列数python-CDA数据分析师
- 大一微积分笔记整理_大一上学期微积分高数复习要点
- 语音和噪声相关数据集(持续更新)
- 金蝶eas怎么引出凭证_如何引出会计分录序时簿?
- Windows10 调整屏幕颜色,设置暖色屏幕的办法
- pandas 选取行和列的方法
- go-issues#14592 runtime: let idle OS threads exit 内核线程暴增与线程回收问题
- ORACLE 数据库常遇问题
- 矢量控制与V/F控制详解
- 跨考哈工程计算机考研科目,2021二战跨考哈工程电子信息初试经验
- ar面部识别_苹果现场演示四款 AR 内容,iPhone X 面部识别效果惊艳