HTML彈窗代碼——dialog

<dialog id="彈窗ID">
<!-- 彈窗內容 -->
</dialog>
<!-- 打開彈窗 -->
<button onclick="document.getElementById('彈窗ID').showModal()">打開彈窗</button>
<!-- 關閉彈窗 -->
<button onclick="document.getElementById('彈窗ID').close()">關閉彈窗</button>

使用HTML的dialog元素，可以很方便地實現彈窗效果。

在彈窗代碼中，首先需要給彈窗一個ID，這個ID用于后面打開和關閉彈窗時進行定位。

彈窗內容則可以在dialog標簽中進行定義，例如在彈窗中添加一個表單：

<dialog id="彈窗ID">
<form>
<input type="text" name="username" placeholder="請輸入用戶名">
<input type="password" name="password" placeholder="請輸入密碼">
<button type="submit">登錄</button>
</form>
</dialog>

在打開彈窗時，只需調用showModal()方法即可：

<button onclick="document.getElementById('彈窗ID').showModal()">打開彈窗</button>

而關閉彈窗則是調用close()方法：

<button onclick="document.getElementById('彈窗ID').close()">關閉彈窗</button>

使用HTML的dialog元素，可以簡單快捷地實現彈窗效果，為Web開發帶來更多的可能性。