用js写一个两个选项的弹窗点击确定时会跳转到另一个页面
可以使用以下代码实现:
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';
}
});
当点击确定按钮时,会获取选中的选项并根据选项的值跳转到另一个页面。如果没有选中的选项,什么也不会发生。同时,点击弹窗以外的区域也会隐藏弹窗
原文地址: https://www.cveoy.top/t/topic/hbHa 著作权归作者所有。请勿转载和采集!