<button id="openBtn">打开弹框</button>
<dialog id="dialog">
<input type="text">
<button id="close">ok</button>
</dialog>
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()
})
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/65813e69411d424e9be03f062dd7d328.png)
-
<details> <summary> 显示或隐藏额外的详细信息
<details>
<summary>点击这里查看更多信息</summary>
<p>这是隐藏的详细信息。</p>
<p></p>
</details>
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/d528569c36fd4f59be3534a5f06cbe7d.png#pic_center=600x)
-
<datalist> 为 input元素提供预定义的选项列表
<label for="browsers">选择一个浏览器:</label>
<input type="text" id="browsers" name="browsers" list="browser-list">
<datalist id="browser-list">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Opera">
<option value="Internet Explorer">
</datalist>
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a588b85c70d8426aa8e94c5503454703.png)