在html5版本中新增了很多实用有语义的标签，今天要介绍的就是html5版本新增的其中一个标签，即<dialog>标签。接下来我们就一起来看看该标签的用法吧！

<dialog open="open">内容</dialog>

它的使用方式有点类似于现在各大组件库的 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>

链接: https://fly63.com/article/detial/11376