浏览器原生html弹窗、面板、事件、dialog

---

效果

---

代码

<button onclick="dog.show()">弹窗(方式一)</button>
<button onclick="dog.showModal()">弹窗(方式二)</button>

<dialog id="dog">
    <div class="win">
        <p>This is a window</p>
        <p>
            <input type="text">
        </p>
        <p>
            <input type="text">
        </p>
        <button onclick="dog.close()">关闭</button>
    </div>
</dialog>

---

css

#dog {
    
    
    border-radius: 10px;
}

#dog::backdrop {
    
    
    background: rgba(0, 0, 0, .5);
}

---

解析

弹窗(方式一)

没有遮罩层。

---

弹窗(方式二)

有遮罩层。

---

dialog

MDN

HTML<dialog> 元素表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器或者窗口。

---

警告：tabindex属性不能被使用在<dialog>元素上。

---

指示这个对话框是激活的和能互动的。当没有设置open属性时，对话框不应该显示给用户。推荐使用.show()或.showModal()方法来渲染对话框，而不是使用open属性。

---

不需要考虑兼容性，使用tab切换输入框的时候不会影响到页面上的输入框，非常方便。