单击 WordPress 按钮时可以在两个页面之间进行选择

Question

我有这个代码，

<div class="EMP-Buton-Cere-Oferta-PF">
  <a href="<?php echo esc_url($header_button_url); ?>" class="header-btn sr-btn sr-lg-btn"><?php echo esc_html($getfree_quote_button); ?></a>
</div>

我希望在单击时可以出现一个小弹出窗口，并让用户在两个页面之间进行选择。

有人知道我该怎么做吗？

谢谢！

Answer 1

为此，您必须执行以下三个步骤

1- 创建所需的按钮或元素，当您单击它时，将显示内部带有链接的模式

2- 在下一步中，您必须编写显示和隐藏模式所需的CSS代码，当然，您可以根据您网站的风格更改某些部分。

3-最后，您需要使用 main-overlay ID 为按钮和 div 设置事件，以使每个模态在单击时显示/隐藏。

// 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>