popup 横向弹出

要实现横向弹出的 popup，您可以使用 CSS 中的 `position` 属性和 `transform` 属性来完成。以下是一个示例代码：

HTML:

<button onclick="togglePopup()">点击弹出</button>

<div id="popup" class="popup">
  <div class="popup-content">
    <!-- 这里放置 popup 的内容 -->
  </div>
</div>

CSS:

.popup {
  position: fixed;
  top: 0;
  left: -100%; /* 初始状态下隐藏在屏幕左侧 */
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  transition: transform 0.3s ease-in-out; /* 添加动画效果 */
}

.popup.active {
  transform: translateX(100%); /* 弹出时向右平移 */
}

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

JavaScript:

function togglePopup() {
  var popup = document.getElementById("popup");
  popup.classList.toggle("active");
}

这段代码会创建一个包含按钮和 popup 内容的基本结构。当按钮被点击时，`togglePopup` 函数会给 popup 元素添加或移除 `active` 类，从而触发动画效果，使其横向弹出或隐藏。您可以根据需要修改样式和内容来满足您的要求。