js+html+css 封装一个弹窗组件

news2024/9/29 9:22:59

HTML中通过一个按钮触发显示弹窗的函数showPopup()，弹窗的内容包含在一个div元素中，初始设置为隐藏状态。
CSS中定义了弹窗的样式，包括背景、位置、边框等。
JavaScript中定义了两个函数showPopup()和hidePopup()，分别用于显示和隐藏弹窗。通过获取弹窗元素的引用，通过修改其display属性来控制显示和隐藏。
使用该弹窗组件时，只需将以上代码保存为对应的文件（如index.html、style.css、script.js），在浏览器中打开index.html文件，点击按钮即可显示弹窗，点击关闭按钮或背景区域即可隐藏弹窗。

请注意，以上代码是一个简单的示例，实际应用中可能需要根据具体需求进行功能扩展和样式调整。
在这里插入图片描述

以下是一个简单的基于JavaScript、HTML和CSS的弹窗组件的代码和说明：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <button onclick="showPopup()">显示弹窗</button>

  <div id="popup" class="popup">
    <div class="popup-content">
      <span class="close" onclick="hidePopup()">&times;</span>
      <h2>弹窗标题</h2>
      <p>这是弹窗的内容。</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS代码（style.css）：

.popup {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.popup-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

JavaScript代码（script.js）：

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

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