html5中dialog标签的使用
在html5版本中新增了很多实用有语义的标签，今天要介绍的就是html5版本新增的其中一个标签，即<dialog>标签。接下来我们就一起来看看该标签的用法吧！
一、dialog标签的定义及用法
在html中，<dialog>标签是html5新增标签，是使用来定义对话框或窗口。目前只有Chrome和Safari6支持该标签，所以用的不多。
<dialog>标签主要表现的作用还是语义，表示该元素是一个对话框。而对于它的样式可能不被使用，因为人们对对话框和窗口的样式都有很高的要求。单凭这个标签的样式效果是达不到要求的，还是得使用css和JavaScript来实现更好的显示效果。
二、dialog标签语法格式
<dialog open="open">内容</dialog>说明：<dialog>标签有一个open属性，用来规定该元素是有效的，用户可以与它进行交互；
三、实例
它的使用方式有点类似于现在各大组件库的 Modal 组件了，浏览器还为该标签提供了原生的 dom 方法： showModal 、 close ，可以直接控制弹窗的展示和隐藏
<dialog id="dialog">
<input type="text">
<button id="close">ok</button>
</dialog>
<button id="openBtn">打开弹框</button>
<script>
const dialog = document.getElementById('dialog')
const openBtn = document.getElementById('openBtn')
const closeBtn = document.getElementById('close')
openBtn.addEventListener('click', () => {
// 打开弹框
dialog.showModal()
})
closeBtn.addEventListener('click', () => {
// 隐藏弹框
dialog.close()
})
</script>本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
