用js写一个H5弹窗代码

以下是一个简单的H5弹窗代码：

HTML部分：

<div id="popup" class="popup">
  <div class="popup-content">
    <div class="popup-header">
      <h2>弹窗标题</h2>
      <span class="close-btn" onclick="closePopup()">X</span>
    </div>
    <div class="popup-body">
      <p>这是弹窗内容</p>
    </div>
    <div class="popup-footer">
      <button onclick="closePopup()">关闭</button>
    </div>
  </div>
</div>

CSS部分：

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 400px;
  padding: 20px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.popup-header h2 {
  margin: 0;
}

.close-btn {
  cursor: pointer;
  font-size: 20px;
}

.popup-body {
  margin-bottom: 20px;
}

.popup-footer {
  text-align: right;
}

JavaScript部分：

function openPopup() {
  document.getElementById("popup").style.display = "block";
}

function closePopup() {
  document.getElementById("popup").style.display = "none";
}

这个H5弹窗代码包含一个弹窗的HTML结构，以及用CSS样式控制弹窗的样式，还有两个JavaScript函数用于打开和关闭弹窗。可以通过在需要弹窗的地方调用openPopup()函数来打开弹窗，通过在弹窗中的关闭按钮或者关闭按钮调用closePopup()函数来关闭弹窗。