初探HTML5.x新特性《dialog》标签
HTML5.2加入了一个新的元素dialog,表示一个对话框或其他交互式组件,书写的时候不能省略结束标签。API很简单用起来也非常顺手。 Usage <dialog open> <p>老王又有时间可以陪女朋友看电影了</p> </dialog> Attributes 此标签包含所有全局属性,除了tabIndex open 该open属性意味着该对话框是可见的。
HTML5.2加入了一个新的元素dialog
,表示一个对话框或其他交互式组件,书写的时候不能省略结束标签。API很简单用起来也非常顺手。
Usage
<dialog open>
<p>老王又有时间可以陪女朋友看电影了</p>
</dialog>复制代码
Attributes
此标签包含所有全局属性,除了tabIndex
open
该open属性意味着该对话框是可见的。没有它,这个对话框就会隐藏起来,直到你使用JavaScript来显示它。添加任何样式之前,对话框呈现如下默认样式:
默认水平居中,宽高适配文字内容
JavaScript有几个方法和属性可以使dialog
元素容易处理。你可能最需要的三种方法是showModal()
,show()
和close()
。
const modal = document.querySelector('dialog');modal.showModal();modal.close();复制代码
showModal()
会添加open
属性即打开对话框。show()
和showModal一样打开对话框,但是有区别在于show方法的打开的模态框是没有背景遮罩的。showModal的方式打开会有一个透明的遮罩层,且这个遮罩层可以通过::backdrop
设置样式的。close()
则会删除open
属性即隐藏,close是可以传参的像这样:modal.close('some return value')
。传入的值可以通过modal.returnValue
获取。
当然还有可以用的事件close。
close
: 当modal关闭的时候触发cancel
: 当按下ESC
关闭模态框的时候触发
// display returnValue
modal.addEventListener('close', () => {returnSpan.innerHTML = modal.returnValue;
});
// esc
modal.addEventListener('cancel', () => {// something
});复制代码
notes:
通过::backdrop
伪元素可以为背景遮罩设置样式
dialog::backdrop{background-color: rgba(0, 0, 0, 0.4);
}复制代码
可以监听dialog的click事件,做到点击背景遮罩就能关闭模态框(当然这个可能不是完美的玩法):
modal.addEventListener('click', (event) => {if (event.target === modal) {modal.close('cancelled');}
});复制代码
Browser compatibility
目前,PC端只有Chrome,Opera支持,其他的厂家也应该会很快支持。不过也不用担心,可以通过dialog-polyfill
(https://github.com/GoogleChrome/dialog-polyfill) 来兼容到IE9+
Polyfill
安装的方式可以通过npm也可以通过常规的script标签来引入。当使用polyfill的时候,每个对话框都需要初始化一次。
dialogPolyfill.registerDialog(modal);复制代码
在低版本的浏览器是不支持伪元素的,polyfill会添加一个新的元素来充当backdrop。样式上得再加上:
dialog + .backdrop {background-color: rgba(0, 0, 0, 0.4);
}复制代码
附
完整的demo在这里(https://codepen.io/keithjgrant/pen/eyMMVL?editors=0101)
原文链接
转载于:https://juejin.im/post/5a61a3b36fb9a01c9e460884
初探HTML5.x新特性《dialog》标签相关推荐
- (九)HTML5+CSS3新特性:语义标签、多媒体标签、表单、新增选择器、盒子模型、模糊、calc函数、过渡
本文仅用作学习记录,学习视频为B站的pink老师 文章目录 HTML5的新特性 HTML5新增的语义化标签 HTML5新增的多媒体标签 HTML5新增的input表单 HTML5新增的表单属性 CSS ...
- html5学习笔记---01.HTML5介绍,02.HTML5的新特性
2013/6/10 01.HTML5介绍 a.创梦技术qq交流群:CreDream:251572072 -------------------- a.创梦技术qq交流群:CreDream:251572 ...
- html5的新特性都有什么,html5的新特性
Web2.0带来的丰厚互联网技能让所有人都享用到了技能发展和体会前进的趣味.作为下一代互联网规范,HTML5天然也是备受等待和注目,技能人员.设计者.互联网爱好者们都在热议HTML5终究能带来啥.那么 ...
- css-07--1. HTML5 的新特性2. CSS 3 的新特性
文章目录 1. HTML5 的新特性 1.1 HTML5 新增的语义化标签 1.2 HTML5 新增的多媒体标签 1. 视频 2. 音频 3. 多媒体标签总结 1.3 HTML5 新增的 input ...
- HTML5常用新特性
1. HTML5新特性 HTML5的新特性主要针对以前的不足,增加了一些新的标签.新的表单和新的表单属性等. 这些新特性都有兼容性问题,基本都是IE9以上版本才支持,如果不考虑兼容性问题,才可以使用这 ...
- html5技术有哪些新特性,28个你必须知道的HTML5的新特性,技巧以及技术
崭新新的页面布局 传统的: HTML5: 1. 新的Doctype 尽管使用,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用 和 来语义化地表示带标题的图片 This is a ...
- 面试-html5,css3新特性
一.HTML5 1.新特性. HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加. 拖拽释放(Drag and drop) API 语义化更好的内容标签(hea ...
- HTML5十五大新特性
HTML5想必大家都很熟悉了.然而,你能准确地说出HTML5带来了哪些新特性吗?本文总结了HTML5带来的15项你必须知道的新特性.一起来看下:1.新的文档类型 (New Doctype)目前许多网页 ...
- input html5 新特性,html5 input 新特性
HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 介绍这些新的输入类型: email url number range Date pickers (date, month, ...
最新文章
- redis安装步骤(单机配置)
- 让8只数码管从左往右显示1、2、3、4、、、8
- 作者:董诚,华中科技大学计算机科学与技术学院硕士生。
- 【Deep Learning 五】课程二(mproving Deep Neural Networks),第一周(Setting up your Machine Learning Applicat)答案
- shell脚本一行太长,使用\换行
- 制作.rpgsave存档修改器
- 史上最全VPS+云服务器运维面板汇总(收藏)
- flashfxp搜索服务器文件夹,FlashFXP 命令行参数
- 【hdu 6045】Is Derek lying?
- 如何在电脑上录制游戏视频画面
- IC Compiler II(ICC II)后端设计流程——超详细
- echarts 环形图 不同区域背景色自定义
- Python:绘制动态地图-pyecharts
- 达芬奇系列教程1——安装及屏幕显示字体太小问题解决
- 步进电机控制(Proteus仿真+代码
- 你的电脑被黑客黑过吗?
- 自定义classloader实现JAVA热替换
- 快慢指针求环入口问题:
- glyphicons 图标大全
- 百大行业翘楚齐聚一堂,浪潮服务器惊艳MWC
热门文章
- Android手机模拟器如何把语言设置为中文
- vc浏览器_自主创业项目推荐,晨兴资本刘芹:我的市场非共识+超配投资原则VC洞见...
- 小腹右侧突然疼了一下_腰椎间盘膨出,为什么不是脊椎柱中间疼,而是左侧疼?...
- oracle 连接图示,ORACLE 表连接方法
- ostream作为函数返回值_函数的调用(一)
- python筛选质数并一行输出五个_python使用filter方法递归筛选法求N以内的质数素数附一行打印心形标记的代码解析...
- identity 1 1 mysql_identity在mysql中怎么用啊以下代码的错误在哪里
- ds证据理论python实现_pix2pix模型理论以及Python实现
- 阻塞io阻塞io_面试官:直接IO、缓存IO、阻塞与同步?
- cad 打开硬件加速卡_CAD画图卡顿?电脑带不动?4个简单实用的方法,解决CAD运行卡顿问题...