通过相对定位、绝对定位显示按钮及按钮点击显示遮罩层弹出框

最近对已开发完毕的大屏需要追加些新的内容，原因是有些指标没有在大屏中显示，这个指标是仿真任务的卡片详情信息，任务会很多，还需要提供查询区进行筛选。但是原有大屏页信息区域已经满了，没有新的空白区域可供调整显示。

想到可以在大屏相关某个位置显示一个按钮，当用户点击时弹出弹出框，弹出框内顶部一行显示查询区各种查询条件，右上角显示弹出框的关闭按钮，点击关闭按钮后弹出框取消显示。弹出框内部的下方主体区域以卡片形式显示每条仿真任务的详情信息。

基于以上的需求，最终实现的效果如下：

1-未点击按钮时样式

 

2-点击按钮，弹出弹出框区域：

 实施过程：

（1）首先在原有的仿真首页地图区域div结构中，追加一个【仿真任务详情】按钮，并追加配套的CSS样式

 对于simul-task-button的div的父级div map-container,需要设置其为相对定位：position: relative;这个在之前的需求开发中已实现。
对于simul-task-button本身的CSS样式，设置如下：

 

.simul-task-button {
  position: absolute;
  top: 0%;
  left: 8%;
  z-index: 10;
  padding: 0.6% 0.8%;
  background-color: rgba(23, 4, 83, 0.1);
  color:#93d3ea;
  border: 1px solid #a5def3;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.82vw;
}

.simul-task-button:hover {
  background-color: transparent;
  color:#4babe3;
  border: 1px solid #47bdff;
}

 

设置simul-task-button按钮为绝对定位，并设置绝对定位位置相对于父级div的top和left的距离参数值，并设置按钮的hover效果。这些都是常规的设置。

（2）在原有的仿真首页地图区域最外层父级div内部最下方，追加一个弹出框div，并追加配套的CSS样式

 

 

 

   <!-- 仿真首页任务列表弹出框 单独区分任何结构体-->
          <div id="simulTaskModal" class="simul-task-modal">
            <div class="simul-task-modal-content">
              <span class="simul-task-modal-close">&times;</span>
              <div id="simulTaskContainer">
                <!-- 这里将复用taskDistribution函数中的任务卡片内容 -->
              </div>
            </div>
          </div>

.simul-task-modal {
  display: none;
  position: absolute;
  z-index: 100;
  top: 50%;
  left: 50%;
  // transform: translate(-50%, -50%);
  transform: translate(-47%, -48%);
  width: 85%; /* 弹出框的总宽度 */
  height: 85%; /* 弹出框的总高度 */
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid #a5def3;
  border-radius: 10px;
  padding: 5px; /* 内容的内边距 */
  box-sizing: border-box; /* 让 padding 不会撑大盒子 */
  overflow: auto; /* 如果内容溢出，则显示滚动条 */
}

.simul-task-modal-content {
  height: 100%;
  /* 让内容区高度填满父容器 */
  width: 100%;
  /* 让内容区宽度填满父容器 */
  position: relative;
  /* 保持相对定位，以便关闭按钮等子元素定位 */
}

.simul-task-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 1px;
  right: 20px;
}

.simul-task-modal-close:hover,
.simul-task-modal-close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

首先设置class="simul-task-modal"的div样式为绝对定位显示，并设置绝对定位位置相对于父级div的top和left的距离参数值，设置垂直显示层级100，保证最顶层显示。同时设置display为none，保证默认访问页面是隐藏不显示

 

 

。只有通过js监听到第一步的按钮被点击后，才通过js修改该弹出框的display为block.
其中：top: 50%;left: 50%;transform: translate(-50%, -50%);是一个巧妙特殊的CSS样式，保证弹出框在父级div区域内居中显示。以下是该特殊CSS用法的解释：

将弹出框的 左上角 移动到父容器 ( .simulindex_left ) 的中心点。

• top: 50% ：把弹出框的上边，从父容器的顶部向下移动其 父容器高度的50% 。
• left: 50% ：把弹出框的左边，从父容器的左侧向右移动其 父容器宽度的50% 。

执行完这一步后，弹出框的左上角在父容器的中心了，但整个弹出框看起来是偏右下的（因为弹出框本身有自己的宽度和高度），并没有居中。

这里的 translate(-50%, -50%) 的作用是：

•  相对于弹出框自身的尺寸 进行移动。
•  第一个 -50% ：将元素向左移动其 自身宽度的50% 。
•  第二个 -50% ：将元素向上移动其 自身高度的50% 。

执行完这一步后，元素从它的左上角（父容器的中心点）向左、向上各移动了自身尺寸的一半，最终使得它自己的中心点与父容器的中心点完全重合。

其他都为常规性的CSS设置。

（3）监听触发弹出框显示的按钮点击、监听弹出框内关闭按钮的点击

//监听点击事件
document.addEventListener('click', function (event) {
  // 检查点击的元素是否为按钮
  if (event.target.classList.contains('simul-task-button')) {
    const modal = document.getElementById('simulTaskModal');
    modal.style.display = 'block';
    // 复用任务分发逻辑来填充内容
    loadSimulTasks();
  }
});



// 关闭仿真任务弹出框
//监听点击事件
document.addEventListener('click', function (event) {
  // 检查点击的元素是否为按钮
  if (event.target.classList.contains('simul-task-modal-close')) {
    const modal = document.getElementById('simulTaskModal');
    modal.style.display = 'none';

  }
});

以上的实施过程，以后可以作为相似案例代码的直接复用：设置点击按钮或已有点击按钮，点击该特定按钮后，弹出顶层弹出框区域，弹出框区域显示定制化内容。