JS弹出层的显示与隐藏示例代码

下面是一个简单的JavaScript示例，展示了如何使用原生的JavaScript来显示和隐藏一个弹出层（假设这个弹出层是一个具有特定ID的`

`元素）。

首先，假设你的HTML结构中有这样一个弹出层：


<div id="popupLayer" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background-color:white; padding:20px; border:1px solid #ccc; z-index:1000;">
  这是一个弹出层
  <button onclick="hidePopup()">关闭</button>
</div>
<button onclick="showPopup()">显示弹出层</button>

然后，你可以使用以下JavaScript函数来控制这个弹出层的显示和隐藏：


function showPopup() {
  // 显示弹出层
  document.getElementById('popupLayer').style.display = 'block';
}

function hidePopup() {
  // 隐藏弹出层
  document.getElementById('popupLayer').style.display = 'none';
}

在上面的HTML中，`

`是我们的弹出层，初始时设置为`display:none`来隐藏它。`