前端综合练习|悬浮窗

Urf_read

于 2024-10-07 08:57:35 发布

阅读量152

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_69886881/article/details/142735377

版权

html 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Learn Intermediate OOP by Building a Platformer Game</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <button id="openModal">打开悬浮窗</button>
    <div id="modal" class="modal">
      <div class="modal-content">
        <span id="closeModal" class="close">&times;</span>
        <p>这是一个悬浮窗！</p>
      </div>
    </div>
    
    <script src="./main.js"></script>
  </body>
</html>

/* 悬浮窗的整体样式 */
.modal {
  display: none; /* 初始状态隐藏 */
  position: fixed; 
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
}

/* 悬浮窗内容的样式 */
.modal-content {
  position: relative;
  margin: 15% auto;
  padding: 20px;
  width: 300px;
  background-color: white;
  border-radius: 8px;
}

/* 关闭按钮样式 */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

document.getElementById("openModal").addEventListener("click", function() {
  document.getElementById("modal").style.display = "block";
});

document.getElementById("closeModal").addEventListener("click", function() {
  document.getElementById("modal").style.display = "none";
});

// 点击窗外关闭悬浮窗
window.addEventListener("click", function(event) {
  const modal = document.getElementById("modal");
  if (event.target === modal) {
    modal.style.display = "none";
  }
});