Browser native html popups, panels, events, dialogs

---

Effect

---

the code

<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);
}

---

analyze

Pop-up window (method 1)

There is no mask layer.

---

Pop-up window (method 2)

There are masking layers.

---

dialog

MDN

The HTML <dialog> element represents a dialog or other interactive component, such as a closable alert, inspector, or window.

---

Warning: The tabindex attribute cannot be used on the <dialog> element.

---

Indicates that this dialog is active and interactive. When the open attribute is not set, the dialog should not be displayed to the user. It is recommended to use the .show() or .showModal() method to render dialogs instead of using the open property.

---

There is no need to consider compatibility. When using tab to switch the input box, it will not affect the input box on the page, which is very convenient.