html 元素 dialog 实现弹窗

• #html

模态框：在打开模态框时，用户只能与模态框交互，无法与页面其他部分交互。
非模态框：在打开非模态框时，用户可以与页面其他部分交互。

dialog 元素既可以创建模态框，也可以创建非模态框。

如下是一个弹窗代码，默认是 display: none 在页面上看不到内容。

<dialog>
    <div>这是一个弹窗标题</div>
    <div>床前明月光，疑是地上霜。</div>
</dialog>

showModal() 创建模态框，close() 关闭弹窗。示例：

<button onclick="customShowModal()">点击出现弹窗</button>
<dialog>
    <button onclick="customCloseModal()">关闭弹窗</button>
    <div>这是一个弹窗标题</div>
    <div>床前明月光，疑是地上霜。</div>
</dialog>

<script>
    function customShowModal() {
        document.querySelector('dialog').showModal()
    }

    function customCloseModal() {
        document.querySelector('dialog').close()
    }
</script>

show() 创建非模态框，close() 关闭弹窗。示例：

<button onclick="customShow()">点击出现弹窗</button>
<dialog>
    <button onclick="customClose()">关闭弹窗</button>
    <div>这是一个弹窗标题</div>
    <div>床前明月光，疑是地上霜。</div>
</dialog>

<script>
    function customShow() {
        document.querySelector('dialog').show()
    }

    function customClose() {
        document.querySelector('dialog').close()
    }
</script>

↶ 返回首页