在一个按钮上显示弹出窗口和网格视图

<button id="popupButton">点击弹出窗口</button>
<div id="popupContainer"></div>

#popupContainer {
  display: none; /* 初始状态下隐藏弹出窗口 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 网格视图每行显示3个单元格 */
  grid-gap: 10px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 10px;
}

// 弹出窗口
const popupButton = document.getElementById('popupButton');
const popupContainer = document.getElementById('popupContainer');

popupButton.addEventListener('click', () => {
  popupContainer.style.display = 'block';
});

// 网格视图
const gridContainer = document.createElement('div');
gridContainer.classList.add('grid');

// 假设有一个数据数组
const data = ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6'];

data.forEach((item) => {
  const gridItem = document.createElement('div');
  gridItem.classList.add('grid-item');
  gridItem.textContent = item;
  gridContainer.appendChild(gridItem);
});

popupContainer.appendChild(gridContainer);