要做到这一点，你必须做以下三个步骤
1-创建所需的按钮或元素，当您单击它时，将显示内部带有链接的模态
2-在下一步中，您必须编写显示和隐藏模态所需的CSS代码，当然，您可以根据站点的样式更改某些部分。
3-最后，您需要为按钮和div设置事件，使其具有main-overlay ID，以便在单击时显示/隐藏每个模态。

// Variables
const mainButton = document.querySelector('#main-button');
const mainModal = document.querySelector('#main-modal');
const mainOverlay = document.querySelector('#main-overlay');

// Events
if( mainButton ) mainButton.addEventListener('click', openModal);
if( mainOverlay ) mainOverlay.addEventListener('click', closeModal);

// Functions
function openModal(e) {
  mainOverlay.classList.add('active');
  mainModal.classList.add('active');
}

function closeModal(e) {
  mainOverlay.classList.remove('active');
  mainModal.classList.remove('active');
}

/* Button */
.button {
  padding:8px 24px;
  border-radius:8px;
  background-color:#0ea5e9;
  font-size:16px;
  border:none;
  color:#FFFFFF;
}

/* Modal */
.modal {
  width:360px;
  height:200px;
  border-radius:12px;
  background-color:#FFFFFF;
  box-shadow: 0 4px 32px 0 rgba(0,0,0,0.10);
  position:fixed;
  inset:0;
  margin:auto;
  box-sizing:border-box;
  padding:32px;
  z-index:999;
  visibility:hidden;
  opacity:0;
  transition:all 0.3s linear;
}

.modal.active {
  visibility:visible;
  opacity:1;
  transition:all 0.3s linear .2s;
}

.modal ul {
  width:100%;
  height:100%;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  column-gap:16px;
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}

.modal ul li {
  width:100%;
  height:100%;
}

.modal ul li a {
  width:100%;
  height:100%;
  background-color:#F7F7F7;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:8px;
  text-decoration:none;
  color:#333333;
  font-size:18px;
}

.modal ul li a:hover {
  background-color:#E7E7E7;
}

/* Overlay */
.overlay {
  width:100%;
  height:100vh;
  background-color:rgba(0,0,0,0.4);
  position:fixed;
  inset:0;
  margin:auto;
  box-sizing:border-box;
  padding:32px;
  visibility:hidden;
  opacity:0;
  transition:all 0.3s linear;
}

.overlay.active {
  visibility:visible;
  opacity:1;
  transition:all 0.3s linear;
}

<!-- Your Button -->
<button class="button" id="main-button">Click Me</button>

<!-- Your Modal -->
<div class="modal" id="main-modal">
  <ul>
    <li><a href="#link-1">Link-1</a></li>
    <li><a href="#link-2">Link-2</a></li>
  </ul>
</div>
<div class="overlay" id="main-overlay"></div>