可以使用以下代码实现:

HTML代码:

<button id="show-popup">显示弹窗</button>

<div id="popup" style="display: none;">
  <p>请选择一个选项:</p>
  <label><input type="radio" name="option" value="option1"> 选项1</label><br>
  <label><input type="radio" name="option" value="option2"> 选项2</label><br>
  <br>
  <button id="confirm-btn">确定</button>
</div>

JavaScript代码:

// 获取按钮和弹窗元素
const showPopupBtn = document.getElementById('show-popup');
const popup = document.getElementById('popup');

// 获取确定按钮和选项元素
const confirmBtn = popup.querySelector('#confirm-btn');
const options = popup.querySelectorAll('input[type="radio"]');

// 点击按钮显示弹窗
showPopupBtn.addEventListener('click', function() {
  popup.style.display = 'block';
});

// 点击确定按钮
confirmBtn.addEventListener('click', function() {
  // 获取选中的选项
  let selectedOption = null;
  for (let i = 0; i < options.length; i++) {
    if (options[i].checked) {
      selectedOption = options[i].value;
      break;
    }
  }
  
  // 如果有选中的选项,跳转到另一个页面
  if (selectedOption) {
    window.location.href = 'http://example.com/' + selectedOption;
  }
});

// 点击弹窗以外的区域隐藏弹窗
document.addEventListener('click', function(event) {
  if (!popup.contains(event.target)) {
    popup.style.display = 'none';
  }
});

当点击确定按钮时,会获取选中的选项并根据选项的值跳转到另一个页面。如果没有选中的选项,什么也不会发生。同时,点击弹窗以外的区域也会隐藏弹窗

用js写一个两个选项的弹窗点击确定时会跳转到另一个页面

原文地址: https://www.cveoy.top/t/topic/hbHa 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录