WordPress中点击按钮弹出双页面选择弹窗的实现方法咨询

1. 调整HTML结构 #

修改原按钮的链接行为，同时添加弹窗的DOM元素：

<div class="EMP-Buton-Cere-Oferta-PF">
  <!-- 把原href改成javascript:void(0)，避免默认跳转 -->
  <a href="javascript:void(0)" class="header-btn sr-btn sr-lg-btn" id="quoteSelectBtn"><?php echo esc_html($getfree_quote_button); ?></a>
</div>

<!-- 弹窗遮罩层和内容 -->
<div class="quote-modal-overlay" id="quoteModalOverlay">
  <div class="quote-modal">
    <p>请选择您要访问的页面：</p>
    <div class="modal-buttons">
      <!-- 替换$page1_url和$page2_url为你实际的页面地址 -->
      <a href="<?php echo esc_url($page1_url); ?>" class="modal-btn">页面1</a>
      <a href="<?php echo esc_url($page2_url); ?>" class="modal-btn">页面2</a>
    </div>
    <button class="modal-close" id="modalCloseBtn">×</button>
  </div>
</div>

2. 添加弹窗样式 #

在你的CSS文件中加入以下样式，控制弹窗的显示效果：

/* 全屏遮罩层，默认隐藏 */
.quote-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 确保弹窗在最上层 */
}

/* 弹窗容器 */
.quote-modal {
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  position: relative;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 弹窗按钮组 */
.modal-buttons {
  margin: 1.5rem 0;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* 选项按钮样式 */
.modal-btn {
  padding: 0.8rem 1.5rem;
  background-color: #0073aa;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.modal-btn:hover {
  background-color: #006799;
}

/* 关闭按钮 */
.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-size: 1.5rem;
  border: none;
  background: none;
  cursor: pointer;
  color: #666;
}

.modal-close:hover {
  color: #000;
}

3. 编写交互逻辑 #

在页面底部或JS文件中加入以下代码，处理弹窗的显示/隐藏：

// 获取页面元素
const quoteBtn = document.getElementById('quoteSelectBtn');
const modalOverlay = document.getElementById('quoteModalOverlay');
const closeBtn = document.getElementById('modalCloseBtn');

// 点击按钮显示弹窗
quoteBtn.addEventListener('click', function() {
  modalOverlay.style.display = 'flex';
});

// 点击关闭按钮隐藏弹窗
closeBtn.addEventListener('click', function() {
  modalOverlay.style.display = 'none';
});

// 点击遮罩层空白处关闭弹窗
modalOverlay.addEventListener('click', function(e) {
  if (e.target === modalOverlay) {
    modalOverlay.style.display = 'none';
  }
});

注意事项 #

• 替换代码中的$page1_url和$page2_url为你实际的两个页面地址，和原代码一样用esc_url()确保URL安全
• 可以根据网站的设计风格调整CSS里的颜色、间距、阴影等样式
• 如果不想修改原按钮的href，可以保留原属性，在JS的点击事件里添加e.preventDefault()阻止默认跳转行为

内容的提问来源于stack exchange，提问作者RCI