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

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

请注意,以上代码是一个简单的示例,实际应用中可能需要根据具体需求进行功能扩展和样式调整。
js+html+css 封装一个弹窗组件_第1张图片

以下是一个简单的基于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()">×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";
}

你可能感兴趣的:(javascript,html,css)