如何弹出 HTML 元素？创建 HTML 元素；2. 创建 JavaScript 函数显示和隐藏元素；3. 绑定事件监听器触发弹出；4. 允许用户关闭窗口。
如何使用 JavaScript 弹出 HTML
当需要在当前网页上显示附加内容或用户交互时，可以使用 JavaScript 弹出 HTML 元素。以下是弹出 HTML 的步骤：
1. 创建 HTML 元素：
使用 HTML 创建要弹出的元素，例如模态窗口、提示框或表单。
<code class="html"><div id="myModal"> <h1>弹出窗口</h1> <p>这是弹出窗口的内容。</p> </div></code>
2. 创建 JavaScript 函数：
编写一个 JavaScript 函数来显示和隐藏弹出的元素。
立即学习“前端免费学习笔记（深入）”；
<code class="javascript">function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}</code>3. 绑定事件监听器：
使用 addEventListener() 方法将事件监听器绑定到触发弹出窗口的元素。
<code class="javascript">document.getElementById("triggerButton").addEventListener("click", openModal);</code>4. 关闭窗口：
在允许用户关闭窗口的情况下，可以使用 closeButton 绑定到关闭函数。
<code class="html"><button id="closeButton" onclick="closeModal()">关闭</button></code>
示例：
以下是一个使用 JavaScript 弹出 HTML 的完整示例：
<code class="html"><!DOCTYPE html>
<html>
<body>
<button id="triggerButton">打开模态窗口</button>
<div id="myModal" style="display: none;">
<h1>弹出窗口</h1>
<p>这是弹出窗口的内容。</p>
<button id="closeButton">关闭</button>
</div>
<script>
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
document.getElementById("triggerButton").addEventListener("click", openModal);
document.getElementById("closeButton").addEventListener("click", closeModal);
</script>
</body>
</html></code> 
